Как уменьшить высоту панели навигации Cupertino Sliver, чтобы она выглядела как обычная панель навигации Cupertino с прокручиваемым телом - PullRequest
Новая
       103

Как уменьшить высоту панели навигации Cupertino Sliver, чтобы она выглядела как обычная панель навигации Cupertino с прокручиваемым телом

0 голосов
/ 19 февраля 2019 
     @override
      Widget build(BuildContext context) {
        return CupertinoPageScaffold(
          child: CustomScrollView(
            slivers: <Widget>[
              CupertinoSliverNavigationBar(
                largeTitle: Container(height:0.0),
                trailing:
                IconButton(
                  icon: Icon(
                    IconData(0xe900, fontFamily: 'message6'),
                    color: Colors.black,
                    size: 25.0,
                  ),
                  onPressed: () {
                   // Navigator.pushNamed(context, '/chat');
                  },
                ),


                middle: Text('Search',style: TextStyle(fontSize: 15.5,
                ),)

              ),


            ],

          ),
        );
      }
    }

Пытаюсь избавиться от складного пространства в CupertinoSliverNavigationBar в фрагменте кода.Я не хочу, чтобы свойство largeTitle было там, но, к сожалению, CupertinoSliverNavigationBar требует этого.Таким образом, я обошел это, поместив пустой виджет «Контейнер» с высотой 0,0, как если бы вы устанавливали расширяемую высоту на 0,0 в скользящей панели приложений для дизайна Android, чтобы придать ему нерасширяемую высоту.Однако, для CupertinoSliverNavigationBar это не работает, поскольку это оставляет пустое расширяемое пространство.Я пытаюсь добиться тонкого стиля навигации в Купертино.Я не могу использовать CupertinoNavigationBar, потому что я использую виджет CustomScrollView из-за прокрутки содержимого, а для флаттера в этом случае требуется CupertinoSliverNavigationBar.

Кто-нибудь знает, как обойти это ограничение?Я хочу тонкий бар / неразборный с прокручиваемым содержимым в теле.

1 Ответ

0 голосов
/ 19 февраля 2019

Вы можете использовать - SliverPersistentHeader для использования - CupertinoNavigationBar

child: CustomScrollView(
          slivers: <Widget>[
            SliverPersistentHeader(
              delegate: MyNav(),
              pinned: true,
              floating: false,
            ),

  class MyNav extends SliverPersistentHeaderDelegate {
  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    // TODO: implement build
    return CupertinoNavigationBar(
      middle: Text(
        'Search',
        style: TextStyle(
          fontSize: 15.5,
        ),
      ),
      trailing: Material(
        child: IconButton(
          icon: Icon(
            IconData(0xe900, fontFamily: 'message6'),
            color: Colors.black,
            size: 25.0,
          ),
          onPressed: () {
            // Navigator.pushNamed(context, '/chat');
          },
        ),
      ),
    );
  }

  @override
  // TODO: implement maxExtent
  double get maxExtent => 60.0;

  @override
  // TODO: implement minExtent
  double get minExtent => 60.0;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    // TODO: implement shouldRebuild
    return false;
  }
}

Другой вариант - использовать - SliverToBoxAdapter виджет.Таким образом, CupertinoNavigationBar не закрепляется сверху. 

child: CustomScrollView(
          slivers: <Widget>[
            SliverToBoxAdapter(
              child: CupertinoNavigationBar(
                middle: Text(
                  'Search',
                  style: TextStyle(
                    fontSize: 15.5,
                  ),
                ),
                trailing: Material(
                  child: IconButton(
                    icon: Icon(
                      IconData(0xe900, fontFamily: 'message6'),
                      color: Colors.black,
                      size: 25.0,
                    ),
                    onPressed: () {
                      // Navigator.pushNamed(context, '/chat');
                    },
                  ),
                ),
              ),
            ),
...