在使用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,后续高版本可能会取消这个参数的设置。