【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()//底部导航栏布局
                    )
                  ],
                )
              )
相关推荐
VT.馒头21 小时前
【力扣】2694. 事件发射器
前端·javascript·算法·leetcode·职场和发展·typescript
life码农21 小时前
HTML文本换行显示几种方法总结
前端·html
强子感冒了21 小时前
CSS基础学习:CSS选择器与优先级规则
前端·css·学习
啟明起鸣21 小时前
【Nginx 网关开发】上手 Nginx,简简单单启动一个静态 html 页面
运维·c语言·前端·nginx·html
vortex521 小时前
深度字典攻击(实操笔记·红笔思考)
前端·chrome·笔记
我是伪码农21 小时前
Vue 1.30
前端·javascript·vue.js
利刃大大1 天前
【Vue】默认插槽 && 具名插槽 && 作用域插槽
前端·javascript·vue.js
艳阳天_.1 天前
web 分录科目实现辅助账
开发语言·前端·javascript
ujainu1 天前
Flutter + OpenHarmony 游戏开发进阶:游戏主循环——AnimationController 实现 60fps 稳定帧率
flutter·游戏·openharmony