Flutter 学习之旅

本文只针对个人学习所遇问题，以及解决方案进行记录，不深刨原理。

不深刨原理是因为我也才开始学习，讲不明白，有可能还误导大家，希望多多包涵。

问题一：

如何通过appBar去设置状态栏字体颜色以及状态栏透明？

解决方法：

1、通过 backgroundColor: Colors.transparent设置透明，以及对应的build函数设置extendBodyBehindAppBar: true

  @overrideWidget build(BuildContext context) {return Scaffold(extendBodyBehindAppBar: true,backgroundColor: Colors.transparent,appBar: null,body: Container(child: Row(children: [])));}

2、通过appBar的systemOverlayStyle属性，配置SystemUiOverlayStyle相关属性

AppBar(backgroundColor: Colors.transparent,systemOverlayStyle: const SystemUiOverlayStyle(statusBarColor: Colors.transparent,statusBarIconBrightness: Brightness.dark,systemNavigationBarColor: Colors.white,systemNavigationBarDividerColor: Colors.transparent,systemNavigationBarIconBrightness: Brightness.dark,),title: Container(margin: EdgeInsets.only(left: 15.r, right: 15.r, top: 15.r),child: Row(children: [])));

问题二：

如何解决SingleChildScrollView滑动会影响appBar背景颜色？

解决方法：

通过NotificationListener来阻止SingleChildScrollView的滑动事件在向上传递

Scaffold(extendBodyBehindAppBar: true,backgroundColor: Colors.transparent,body: /*通过NotificationListener来阻止SingleChildScrollView的滑动事件在向上传递*/NotificationListener<ScrollNotification>(onNotification: (ScrollNotification notification) {// 返回true来阻止事件向上传递return true;},child: SingleChildScrollView(child: Column(children: []))));

问题三：

如何解决SingleChildScrollView嵌套GridView报错？

解决方法：

这个报错主要是因为GridView高度原因，给GridView在包裹一层Container（容器），设置高度即可

Container(margin: EdgeInsets.only(left: 0.r, right: 0.r, top: 0.r),height: 75 * (iconList.length / 2).h,child: GridView.builder(gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2,crossAxisSpacing: 10,mainAxisSpacing: 10,childAspectRatio: 176 / 65),//宽高比itemCount: iconList.length,itemBuilder: (BuildContext context, int index) {return Container(margin: EdgeInsets.only(left: 8.r, right: 8.r, top: 5.r),decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(12.r)),color: Colors.white),child: Row(mainAxisAlignment: MainAxisAlignment.start,children: []));}));

问题四：

如何解决SingleChildScrollView嵌套GridView滑动冲突问题？

解决方法：

SingleChildScrollView嵌套GridView滑动冲突主要是应为两个组件都是可滑动的，解决方式是禁止GridView滑动，设置physics: const NeverScrollableScrollPhysics(), shrinkWrap: true属性即可。

GridView.builder(physics: const NeverScrollableScrollPhysics(),shrinkWrap: true,gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2,crossAxisSpacing: 10,mainAxisSpacing: 10,childAspectRatio: 176 / 65),//宽高比itemCount: iconList.length,itemBuilder: (BuildContext context, int index) {return Container(margin: EdgeInsets.only(left: 8.r, right: 8.r, top: 5.r),decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(12.r)),color: Colors.white),child: Row(mainAxisAlignment: MainAxisAlignment.start,children: []));});

问题五：

通过GestureDetector获取Container的点击事件，使用const Expanded(child: SizedBox())区域点击无效？

解决方法：

设置Container的decoration属性BoxDecoration()即可。

GestureDetector(onTap: onTap,child: Container(width: double.infinity,decoration: const BoxDecoration(),height: 50.h,child: Row(mainAxisAlignment: MainAxisAlignment.start, children: [Image.asset("assets/images/${imageName}.png", width: 20.r, height: 20.r),SizedBox(width: 15.w),Text(name, style: TextStyle(color: Colors.black, fontSize: 14.sp)),const Expanded(child: SizedBox()),Image.asset("assets/images/rightward.png", width: 24.w, height: 14.h)])));

此博客会持续更新，大家有什么问题或者有更好的解决办法，可留言沟通。