Sliver 应用栏无法正确显示 - Flutter

Posted

技术标签:

【中文标题】Sliver 应用栏无法正确显示 - Flutter【英文标题】:Sliver App Bar not displaying correctly - Flutter 【发布时间】:2021-11-26 15:32:18 【问题描述】:

我正在尝试显示一个 SliverAppBar,如我的设计所示

但我不确定是否可以在 Flutter 中完成

这是我目前的代码

        SliverAppBar(
      // title: ,
      backgroundColor: Colors.grey[200],
      expandedHeight: 300,
      centerTitle: true,
      shape: const ContinuousRectangleBorder(
          borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(100),
              bottomRight: Radius.circular(100))),
      actions: <Widget>[
CircleAvatar(
              radius: 20,
              // foregroundColor: Colors.red,
              backgroundImage: AssetImage(
                'assets/img/categories/player.png',
              ),
            ),
      ],
      flexibleSpace: FlexibleSpaceBar(
        background: Container(),
        centerTitle: true,

        title: Container(
          height: 40,
          child: Column(
            children: [
              Text("Mrs Surname Name",
                  style: TextStyle(
                    fontFamily: 'Kannada Sangam MN',
                    fontWeight: FontWeight.w500,
                    fontSize: 20,
                    // color: AppTheme.high_emphasis,
                  )),

            ],
          ),
        ),

      ),
      pinned: true,
      floating: false,
      elevation: 0,
    ),

我希望即使向上滚动头像也能显示名称和图案,但更小

但是向上滚动时要隐藏的“常量”????

【问题讨论】:

【参考方案1】:

我们可以使用SliverAppBar title 来保存name &amp; Motif,因为它始终对 UI 可见。在下一部分头像图像也始终可见,但会根据滚动减小大小,在这种情况下,将其放在flexibleSpace:FlexibleSpaceBar(title: Avatar) 中会是更好的选择。对于其他人,将基于滚动消失的信息,因此我们可以使用FlexibleSpaceBar( background:) 并使用column 填充它。但是会有重叠,我们可以在Column 的第一个孩子使用 const SizedBox(height: kToolbarHeight,), 来欺骗它。

结果

这是一个可以帮助生成 UI 的示例,您可以像这样调整装饰。

      SliverAppBar(
            pinned: true,
            backgroundColor: Colors.grey[200],
            expandedHeight: 300,
            title: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: const [
                Text(
                  "Mrs, Surname Name",
                  style: TextStyle(
                    fontSize: 16,
                  ),
                ),
                Text(
                  "Mrs, Surname Name",
                  style: TextStyle(
                    fontSize: 26,
                  ),
                ),
              ],
            ),
            shape: const ContinuousRectangleBorder(
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(100),
                bottomRight: Radius.circular(100),
              ),
            ),
            flexibleSpace: FlexibleSpaceBar(
               background: Container(
                color: Colors.grey[200],
                padding: const EdgeInsets.only(left: 16),
                child: Column(
                  ///* however we can use sizedBox to handle upperSpaces
                  crossAxisAlignment: CrossAxisAlignment.start,
                  // mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    ///* like this
                    const SizedBox(
                      height: kToolbarHeight,
                    ),
                    ...List.generate(
                      4,
                      (index) => Text("others info"),
                    )
                  ],
                ),
              ),
              title: Row(
                ///* not sure why i cant avoid using Row here
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  SizedBox(),
                  Align(
                    alignment: Alignment.center,
                    child: Container(
                      height: 70,
                      width: 70,
                      alignment: Alignment.center,
                      decoration: const BoxDecoration(
                        shape: BoxShape.circle,
                        color: Colors.deepOrange,
                      ),
                      child: Text("img"),
                    ),
                  ),
                ],
              ),
            ),
          ),
     

【讨论】:

非常感谢您的帮助,但在您的代码中,img 与标题重叠 - 我还想将状态栏设置为 false,因此它是相同的灰色,但图像在向上滚动时会重叠? 是的,这是滚动时的一个小问题。但它有点褪色,这就是我忽略它的原因 谢谢你我投了赞成票你能帮我解决我在 SliverAppBar 上的其他问题吗? :) 欢迎加入 SliverAppBar Always Show Shadow - Expanded mode too - SliverAppBar hide list between SliverPersistentHeader - 非常感谢 - 第一个我需要更多帮助?【参考方案2】:

您需要使用 SliverOverlapAbsorber/SliverOverlapInjector。 试试this希望它会起作用。

【讨论】:

您能否详细说明这将如何提供帮助

以上是关于Sliver 应用栏无法正确显示 - Flutter的主要内容,如果未能解决你的问题,请参考以下文章

Flutter:使用 Sliver 小部件时如何在滚动时隐藏 BottomAppBar?

Nativescript - 搜索栏在操作栏中无法正确显示(IOS)

标签栏未正确显示图像

Angular/Bootstrap - 导航栏无法正确显示

Angular 5 材质小吃栏仅针对自定义 ErrorHandling 无法正确显示,否则它可以正常工作

尽管它显示在任务栏上,但 Android Studio 模拟器无法正常工作