【flutter对屏幕底部有手势区域(如:一条横杠)导致出现重叠遮挡】

关键:

1.使用SafeArea保持内容在安全显示区域内

2.MediaQuery.of(context).padding.bottom获取底部安全区域高度

3.遮挡住由于显示到抬高了显示区域在底部出现的透明或半透明

dart 复制代码
Scaffold(
                extendBody: true,
                body: Stack(
                  alignment: Alignment.bottomCenter,
                  children: [
                    SizedBox(
                       ///主体内容
                    ),
                    //覆盖底部有手势区域的背景色
                    Container(
                      width: Utils().screenWidth(context),
                      color: Colors.white,
                      height: MediaQuery.of(context).padding.bottom,
                    ),
                    SafeArea(
                    child: _bottomView()//底部导航栏布局
                    )
                  ],
                )
              )
相关推荐
kirk_wang3 小时前
Flutter 三方库 `flutter_phone_direct_caller` 在 OpenHarmony 平台的适配实战
flutter·移动开发·跨平台·arkts·鸿蒙
旧梦吟3 小时前
脚本网页 地球演化
前端·算法·css3·html5·pygame
xiaoxue..3 小时前
哨兵节点与快慢指针解决链表算法难题
前端·javascript·数据结构·算法·链表
这是个栗子3 小时前
【前端知识点总结】前端跨域问题
前端·跨域·cors
尽欢i3 小时前
踩过坑才懂:前端生成唯一 ID,别用 Date.now ()了!一行代码搞定
前端·javascript
JS_GGbond3 小时前
解锁 JavaScript 对象的“魔法宝箱”:这些方法让你玩转对象操作
前端·javascript
Doris8933 小时前
【JS】JS进阶--编程思想、面向对象构造函数、原型、深浅拷贝、异常处理、this处理、防抖节流
开发语言·javascript·ecmascript
是杉杉吖~3 小时前
《5 分钟上手 React Flex 容器:从 0 搭建响应式卡片列表》
前端·react.js·前端框架
福大大架构师每日一题3 小时前
rust 1.92.0 更新详解:语言特性增强、编译器优化与全新稳定API
java·javascript·rust
大江东第一深情3 小时前
Origin 2024 进行语言切换后仍然显示为英文
运维·前端