flutter - 当 SliverAppBar 滚动时,flexibleSpace 内的图标不会隐藏
问题描述
我在里面有“下一个”和“上一个”按钮flexibleSpace
,如下所示,“下一个”和“上一个”按钮的文本在滚动时会隐藏,但前进和后退箭头不会隐藏。我希望它们在滚动时隐藏。
这是我的代码,
SliverAppBar(
backgroundColor: selectedColor ?? Colors.blue,
expandedHeight: 112,
snap: true,
pinned: false,
floating: true,
forceElevated: true,
actions: <Widget>[
IconButton(
icon: Icon(Icons.event),
onPressed: () {
DateTime now = DateTime.now();
_selectDate(context, now);
})
],
flexibleSpace: selectedTitle != null ? SafeArea(
child: Column(
children: <Widget>[
Container(
height: kToolbarHeight,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
selectedTitle?.toUpperCase() ?? '',
style: Theme
.of(context)
.textTheme
.title
.copyWith(fontSize: 16, color: Colors.white),
),
SizedBox(
height: 2,
),
isWeekly
? SizedBox(
height: 0,
width: 0,
)
: Text(
displayDate ?? '',
style: Theme
.of(context)
.textTheme
.caption
.copyWith(fontSize: 10, color: Colors.white),
),
SizedBox(
height: 2,
),
Text(
selectedParshaNodeModel?.parshaName ?? '',
style: Theme
.of(context)
.textTheme
.subtitle
.copyWith(fontSize: 14, color: Colors.white),
),
],
),
),
Expanded(
child: Container(
height: kToolbarHeight,
width: MediaQuery
.of(context)
.size
.width,
color: Colors.white,
child: Row(
children: <Widget>[
Expanded(
child:
FlatButton(
onPressed: () {}
,
child: Row(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.arrow_back,
color: Colors.grey),
Text(
'Prev',
style: Theme
.of(context)
.textTheme
.subhead
.copyWith(color: Colors.grey),
)
],
))),
Expanded(
child:
FlatButton(
onPressed: (){},
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceAround,
crossAxisAlignment:
CrossAxisAlignment.center,
children: <Widget>[
Text('Next',
style: Theme
.of(context)
.textTheme
.subhead
.copyWith(color: Colors.grey)),
Icon(
Icons.arrow_forward,
color: Colors.grey,
),
],
)))
],
),
),
)
],
),
) : Container(),
),
解决方案
发生这种情况是因为箭头溢出了按钮的边界。添加clipBehavior: Clip.hardEdge
应该可以解决您的问题:
child: FlatButton(
clipBehavior: Clip.hardEdge,
onPressed: () {},
child: Row(
...Your Arrow and Text
),
),
推荐阅读
- android - Android - 在 src/main 目录中读写文件
- ubuntu - 为个人计算生成完全可用的 Debian VM 的最小 Vagrant 脚本
- java - 当我收到此 java.lang 错误时,如何使用 Gmail 使用 R 发送电子邮件
- typescript - 在Angular中搜索时如何转到表格的第一页?
- reactjs - 成功登录后路由到仪表板(React)
- c++ - 我如何获得无限小的数字(对于分形)
- python - 如何在 Python 中高效地创建多个变量?
- c# - 如何使用xamarin c#在listview的同一行中划分两列
- javascript - 通过 createObjectURL 的 Blob 视频不起作用
- c++ - OpenGL如何在模板测试失败且深度测试成功时写入模板缓冲区?