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

Posted 2023-02-23

【中文标题】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 上方，则它与您的内容分开。这不是一个很好的用户体验。