如何降低 Cupertino Sliver 导航栏的高度，使其看起来像带有可滚动主体的普通 Cupertino 导航栏答案

【问题标题】：How do you reduce the height of the Cupertino Sliver Navigation bar to make it look like an ordinary Cupertino Navigation Bar with a scrollable body如何降低 Cupertino Sliver 导航栏的高度，使其看起来像带有可滚动主体的普通 Cupertino 导航栏
【发布时间】：2019-07-12 22:53:12
【问题描述】：

     @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,
                ),)

              ),


            ],

          ),
        );
      }
    }

我试图摆脱代码 sn-p 中 CupertinoSliverNavigationBar 中的可折叠空间。我不希望 largeTitle 属性在那里，但不幸的是 CupertinoSliverNavigationBar 需要它。因此，我通过放置一个高度为 0.0 的空 Container 小部件来解决它，就像您在 sliver App Bar 中将可扩展高度设置为 0.0 一样，以便为 android 设计提供不可扩展的高度。但是，对于 CupertinoSliverNavigationBar，它不起作用，因为它留下了一个空的可扩展空间。我正在尝试实现一个纤细的库比蒂诺风格的导航栏。我不能使用 CupertinoNavigationBar，因为我正在使用 CustomScrollView 小部件，因为滚动内容和颤振在这种用例中需要 CupertinoSliverNavigationBar。

有人知道解决这个限制的方法吗？我想要一个细长的条形/不可折叠的，正文中有可滚动的内容。

【问题讨论】：

Cupertino 小部件集通常模仿 iOS SDK。你将如何在 Xcode 中实现这一点？

标签： flutter flutter-layout flutter-sliver flutter-cupertino

【解决方案1】：

您可以使用 -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');
                    },
                  ),
                ),
              ),
            ),

【讨论】：