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 上的领先和动作移动到底部的主要内容,如果未能解决你的问题,请参考以下文章
在 Flutter 应用程序中更改 SliverAppBar 标题颜色
Flutter 中的 SliverAppBar 和 SliverPersistentHeader 有啥区别?