Flutter 学习之旅

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

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

问题一:

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

解决方法:

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

Dart 复制代码
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        extendBodyBehindAppBar: true,
        backgroundColor: Colors.transparent,
        appBar: null,
        body: Container(child: Row(children: [])));
  }

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

Dart 复制代码
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的滑动事件在向上传递

Dart 复制代码
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(容器),设置高度即可

Dart 复制代码
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属性即可。

Dart 复制代码
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()即可。

Dart 复制代码
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)
            ])));

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

相关推荐
许白掰7 分钟前
Linux入门篇学习——借助 U 盘或 TF 卡拷贝程序到开发板上
linux·学习·借助 u 盘拷贝程序到开发板上·借助 tf卡拷贝程序到开发板上
Cao_Shixin攻城狮5 小时前
Flutter运行Android项目时显示java版本不兼容(Unsupported class file major version 65)的处理
android·java·flutter
iFulling11 小时前
【计算机网络】第四章:网络层(上)
学习·计算机网络
香蕉可乐荷包蛋12 小时前
AI算法之图像识别与分类
人工智能·学习·算法
xiaoli232712 小时前
课题学习笔记1——文本问答与信息抽取关键技术研究论文阅读(用于无结构化文本问答的文本生成技术)
笔记·学习
人生游戏牛马NPC1号12 小时前
学习 Flutter (四):玩安卓项目实战 - 中
android·学习·flutter
LGGGGGQ13 小时前
嵌入式学习-PyTorch(7)-day23
人工智能·pytorch·学习
stm 学习ing14 小时前
Python暑期学习笔记3
笔记·python·学习
屁股割了还要学14 小时前
【C语言进阶】内存函数
c语言·开发语言·学习·算法·青少年编程
靴子学长14 小时前
Lotus-基于大模型的查询引擎 -开源学习整理
python·学习·自然语言处理