本文只针对个人学习所遇问题,以及解决方案进行记录,不深刨原理。
不深刨原理是因为我也才开始学习,讲不明白,有可能还误导大家 ,希望多多包涵。
问题一:
如何通过appBar去设置状态栏字体颜色以及状态栏透明?
解决方法:
1、通过 backgroundColor: Colors.transparent设置透明,以及对应的build函数设置extendBodyBehindAppBar: true
@override
Widget 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)
])));
问题六:
接入高德地图所遇的坑(测试环境 Android 真机)?
问题与解决方案:
1、基数服务类导包问题,例如AMapApiKey与AMapPrivacyStatement?
解决:引用“amap_flutter_base: ^3.0.0”,具体版本需要按照引用的定位或者地图版本适配
dependencies:
amap_flutter_base: ^3.0.0
2、通过“amap_flutter_map: ^3.0.0”导入地图库后初始化地图报错(权限问题就不说了,默认权限全给的情况下)?
解决:Android app目录下build.gradle中配置“dependencies {implementation('com.amap.api:3dmap:8.1.0') }”
dependencies {
implementation('com.amap.api:3dmap:8.1.0')
}
3、通过“amap_flutter_location: ^3.0.0”导入定位后配置“AMapFlutterLocation.updatePrivacyShow(true, true); AMapFlutterLocation.updatePrivacyAgree(true);”报错?
解决:Android app目录下build.gradle中配置“dependencies {implementation('com.amap.api:location:5.6.1') }”
dependencies {
implementation('com.amap.api:location:5.6.1')
}
上述版本是个人测试版本,大家可以去官网引用最新版本。
高德地图接入文档https://lbs.amap.com/api/flutter/guide/positioning-flutter-plug-in/compatibility-info
问题七:
在Column、Row、Flex中调用地图无法显示?
解决方法:
使用Expanded包裹地图即可。
Scaffold(
backgroundColor: DIYColors.gray_f4,
body: SafeArea(
child: Column(
children: [Expanded(child: AMap.instance.aMapWidget())],
)));
注:AMap.instance.aMapWidget()是封装的地图组建
问题八:
在initState方法中使用上下文对象,报空指针异常?
解决方法:
使用Future.dalayed延迟0秒执行需使用上下文对象的方法。
Future.delayed(Duration.zero, () {
setState(() {
_initDate();
});
});
_initDate() {
iconName.add(S.of(context).MessageNotifications);
iconName.add(S.of(context).TimeFormat);
}
问题九:
如何解决ListView滑动会影响appBar背景颜色?
解决方法:
设置AppBar scrolledUnderElevation: 0.0属性,0.0表示阴影范围
AppBar(
scrolledUnderElevation: 0.0
)
此博客会持续更新,大家有什么问题或者有更好的解决办法,可留言沟通。