flutter - 如何增加 CupertinoSliverNavigationBar 的高度

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

我正在尝试使用 Cupertino Widgets 克隆 WhatsApp(iOS 版本)。

在尝试使用 CupertinoSliverNavigationBar 制作 header 时,我注意到无法增加 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

是否有任何解决方法或无论如何可以增加高度?谢谢!

最佳答案

Flutter 纯粹主义者和拥护者会杀了我,但这些尺寸是常量值的一部分(如 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() 的所有依赖项,然后把你自己的名字和你自己的值放在那里......我想这不仅仅是来自的标准设计指南Apple,一些开发人员需要更改这些值的能力。我们也许应该打开一个 Github 请求。

希望我的“hacky”解决方案对您有用!

结果: demo image

关于flutter - 如何增加 CupertinoSliverNavigationBar 的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56528087/

相关文章:

flutter - 带有 IndexedStack 的 AnimatedSwitcher

flutter - 如何在 flutter 中仅使一行2个元素中的一个元素居中

mobile - 滚动时如何从 SliverAppBar 淡入/淡出小部件?

flutter - 如何在Flutter中生成不重复的随机数

flutter - 了解 Flutter 渲染引擎

flutter - 当折叠内容是动态时如何在 flutter 中实现条子

flutter - 有没有办法在列中使用 ListView.Builder 而无需收缩包装?

dart - Flutter - 重写 CupertinoTabBar 的 "build"方法

dart - 错误 : Target of URI doesn't exist: 'package:test/test.dart'

firebase - 添加 firebase 消息传递后 flutter gradle 出错