如何增加CupertinoSliverNavigationBar的高度

时间:2019-06-10 14:10:06

标签: flutter flutter-layout flutter-sliver flutter-cupertino

我正尝试使用Cupertino Widgets轻拍关闭WhatsApp(iOS版本)。

在尝试使用CupertinoSliverNavigationBar制作标题时,我注意到您无法增加 CupertinoSliverNavigationBar 的高度。

我的代码

return CupertinoPageScaffold(
      child: NotificationListener<ScrollNotification>(
        onNotification: (scrollNotification) {
          if (scrollNotification is ScrollStartNotification) {
            _onStartScroll(scrollNotification.metrics);
          } else if (scrollNotification is ScrollUpdateNotification) {
            _onUpdateScroll(scrollNotification.metrics);
          } else if (scrollNotification is ScrollEndNotification) {
            _onEndScroll(scrollNotification.metrics);
          }
        },
        child: CustomScrollView(
          slivers: <Widget>[
            CupertinoSliverNavigationBar(

              leading: GestureDetector(
                child: Padding(
                  padding: EdgeInsets.only(top: 10.0),
                  child: Text(
                    "Edit",
                    style: TextStyle(
                      color: Constants.primaryColor,
                      fontSize: 18.0,
                    ),
                  ),
                ),
                onTap: ()=>print("Tapped"),
              ),

              trailing: GestureDetector(
                child: Icon(
                  CupertinoIcons.create_solid,
                  size: 25.0,
                ),
                onTap: ()=>print("Tapped"),
              ),
              automaticallyImplyLeading: false,
              largeTitle: Column(
                children: <Widget>[
                  Container(
                    child: Text(
                      "Chats",
                      textAlign: TextAlign.left,
                    ),
                  ),
                  GestureDetector(
                    child: SearchBar(),
                  ),

                ],
              ),


            ),



          ],

        ),
      ),
    );

以下屏幕截图:

我想实现的目标

What i want to achieve

正在得到什么

enter image description here

周围是否有任何工作或是否在增加高度?谢谢!

2 个答案:

答案 0 :(得分:2)

颤抖的纯粹主义者和拥护者会杀了我,但是这些大小是常量值(例如MaterialDesign准则值)的一部分,有2种快速选择:

选项1: 直接修改SDK: Ctrl(或Cmd)+单击 CustomScrollView ,将打开 flutter / lib / src / cupertino / nav_bar.dart

修改第22或26行:

/// This height is constant and independent of accessibility as it is in iOS.
const double _kNavBarPersistentHeight = 44.0;

/// Size increase from expanding the navigation bar into an iOS-11-style large title
/// form in a [CustomScrollView].
const double _kNavBarLargeTitleHeightExtension = 52.0; // change this one!

选项2: 直接将nav_bar.dart复制到您的项目中,然后对其进行修改,或者更好的是,获取CustomScrollView()的所有依赖项,并在其中输入您自己的名称和您自己的值...我想除了作为标准设计指南之外苹果公司,几位开发人员必须具备更改这些值的能力。也许我们应该打开一个Github请求。

希望您发现我的“ hacky”解决方案很有用!

结果: demo image

答案 1 :(得分:1)

您不需要修改 SDK 或类似的东西。 我找到了一个简单的解决方案。

将此添加到 CustomScrollView,调整锚点,直到获得良好的 UI。 自定义滚动视图( 锚点:0.07,

See the image here