在使用Flutter项目开发中,可能会有页面需要滑动收起标题栏的效果,一般都会使用SliverAppBar来实现,当项目的Flutter的SDK版本升级到3.4后,发现使用了SliverAppBar的页面,在滑动过程中,标题栏和状态栏的颜色不对,初始图:
滑动后(需要将头像收起,角色名称隐藏,只显示小头像和账号):
预期是要滑动收起和初始状态的颜色要一致,都应该是浅绿色,代码如下:
NestedScrollView(
controller: scrollController,
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) => [
SliverAppBar(
backgroundColor: mColors.colorBgGreen4,
/// 右侧图标
actions: [
GestureDetector(
child: Image.asset(
'images/icon/icon_customer_service.png',
width: 24,
height: 24,
).initMargin(right: 12),
onTap: () {
},
),
//右上角消息
MessageColumn()
],
toolbarHeight: 44,
centerTitle: true,
pinned: true,
elevation: 0,
snap: false,
floating: false,
forceElevated: innerBoxIsScrolled,
/// 整个头部背景高度
expandedHeight: 84,
/// 头部标题
title: ValueListenableBuilder(
valueListenable: showTitle,
builder: (BuildContext context, dynamic value, Widget? child) {
return AnimatedOpacity(
opacity: value ? 1 : 0,
duration: const Duration(milliseconds: 300),
child: Offstage(
offstage: value ? false : true,
child: Container(
height: 44,
child: GestureDetector(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
margin: EdgeInsets.only(left: 12, right: 8),
child: Image.asset(
"images/icon/icon_user_avatar.png",
width: 28,
),
),
Text(
'187****0182',
style: TextStyle(
color: mColors.colorTitle,
fontSize: 16,
fontWeight: FontWeight.bold),
),
],
),
onTap: () async {
},
),
),
),
);
},
),
onStretchTrigger: () async => () {
return;
},
stretch: true,
/// 可以往下拉的最大距离
stretchTriggerOffset: 1,
flexibleSpace: FlexibleSpaceBar(
/// 整个头部背景
background: Container(
color: mColors.colorBgGreen4,
height: 60,
width: double.infinity,
margin: MediaQuery.of(context).padding,
child: UserInfo2Column(),
),
),
),
],
body: Container(
color: Color(0xfff3f5f7),
child: SingleChildScrollView(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0), topRight: Radius.circular(10.0))),
child: Container(
),
),
)),
),
)
无论怎么改都发现,似乎有一个百分百的颜色遮罩一样,backgroundColor设置成纯色,依然会有若隐若现的阴影,后来和大佬朋友讨论,说有没有可能是因为flutter版本升级后的版本差异,说干就干,将sdk版本降低到3.4以前,确实没有这个问题了。
怎么解决了,查阅一番资料后发现,3.4以后,APP的默认样式ThemeData改成了Material形式的,在项目入口处将MaterialApp的ThemeData添加一个参数useMaterial3: false,就完美解决了:
MaterialApp(
///安卓切到后台会不显示app名字,需要加此参数
title: 'xxxx',
theme: ThemeData(
useMaterial3: false,//添加此参数解决问题
colorScheme: const ColorScheme.light(),
))
这个参数是什么意思呢,文档的解释:
A temporary flag that can be used to opt-out of Material 3 features
意思就是是否使用Material 3的样式,默认是true,后续高版本可能会取消这个参数的设置。