Flutter 学习之旅

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

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

问题一：

如何通过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
)

 

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