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

Question

我正在制作这样的笔记应用程序：

如您所见，我的标题在前导和操作图标下方，但我想让它像这样反转：

我怎样才能做到这一点？这是我的代码：

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,
        ),
      ),

标签： androidflutterflutter-layoutflutter-sliver

Answer 1

The best I could do was use a second SliverAppBar on top of the first, with some adjustments to both of their parameters. You may want to further customize to your preference:

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,
    ),
  ],

  ...
  
),