Flutter,如何将 SliverAppbar 上的领先和动作移动到底部

Posted

技术标签:

【中文标题】Flutter,如何将 SliverAppbar 上的领先和动作移动到底部【英文标题】:Flutter, how to move leading and action on SliverAppbar to the bottom 【发布时间】:2021-11-20 09:09:22 【问题描述】:

我正在制作这样的笔记应用:

如您所见,我的标题在前导和动作图标下方,但我想像这样将其反转:

我怎样才能做到这一点?这是我的代码:

SliverAppBar(
        leading: Icon(
          Icons.menu,
          color: Colors.black,
        ),
        actions: const [
          Icon(Icons.search, color: Colors.black),
          SizedBox(width: 8),
          Icon(Icons.more_vert, color: Colors.black),
          SizedBox(width: 14),
        ],
        elevation: 2,
        pinned: true,
        floating: true,
        backgroundColor: kLightBGColor,
        expandedHeight: 150,
        flexibleSpace: FlexibleSpaceBar(
          title: Text(
            'My Notes',
            style: TextStyle(
              color: Colors.grey.shade900,
              fontWeight: FontWeight.w400,
            ),
          ),
          centerTitle: true,
        ),
      ),

【问题讨论】:

【参考方案1】:

我能做的最好的就是在第一个SliverAppBar 之上使用第二个SliverAppBar,并对它们的两个参数进行一些调整。您可能希望根据自己的喜好进一步自定义:

CustomScrollView(
  slivers: [
    SliverAppBar(
      elevation: 0,
      pinned: true,
      floating: true,
      backgroundColor: Colors.grey,
      expandedHeight: 80,
      flexibleSpace: FlexibleSpaceBar(
        title: Text(
          'My Notes',
          style: TextStyle(
            color: Colors.grey.shade900,
            fontWeight: FontWeight.w400,
          ),
        ),
        centerTitle: true,
      ),
    ),
    SliverAppBar(
      leading: Icon(
        Icons.menu,
        color: Colors.black,
      ),
      actions: const [
        Icon(Icons.search, color: Colors.black),
        SizedBox(width: 8),
        Icon(Icons.more_vert, color: Colors.black),
        SizedBox(width: 14),
      ],
      pinned: true,
      backgroundColor: Colors.grey,
      expandedHeight: 45,
      collapsedHeight: 45,
      toolbarHeight: 20,
    ),
  ],

  ...
  
),

【讨论】:

这段代码可以创建一个类似于我的目标的布局,但是问题是两个appbars在向上滑动时不能合并为一个直到它们崩溃。 这只是当前小部件不可用的。可能出于设计原因。文本标题旨在与您显示的内容相关联。如果您的标题在 AppBar 上方,则它与您的内容分开。这不是一个很好的用户体验。

以上是关于Flutter,如何将 SliverAppbar 上的领先和动作移动到底部的主要内容,如果未能解决你的问题,请参考以下文章

如何将卡片小部件放在 SliverAppBar 中?

在 Flutter 应用程序中更改 SliverAppBar 标题颜色

Flutter 中的 SliverAppBar 和 SliverPersistentHeader 有啥区别?

Flutter:使用 ListView.builder 消失的 SliverAppBar

Flutter之SliverAppBar

如何使用 tabBar 实现 sliverAppBar