【问题标题】:How to increase height of CupertinoSliverNavigationBar如何增加 CupertinoSliverNavigationBar 的高度
【发布时间】:2019-10-24 22:54:12
【问题描述】:

我试图使用 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(),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );

以下截图:

我想要达到的目标

我得到了什么

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

【问题讨论】:

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


    【解决方案1】:

    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”解决方案有用!

    结果:

    【讨论】:

      【解决方案2】:

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

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

      See the image here

      【讨论】:

        猜你喜欢
        • 2015-10-27
        • 2018-12-08
        • 2012-01-23
        • 1970-01-01
        • 2012-10-13
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多