【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()//底部导航栏布局
                    )
                  ],
                )
              )
相关推荐
卍郝凝卍12 小时前
物联网卡摄像头从前端至后台的实现过程
前端·物联网·视频解决方案
QuantumLeap丶12 小时前
《Flutter全栈开发实战指南:从零到高级》- 10 -状态管理setState与InheritedWidget
flutter·前端框架·dart
疯狂暴龙GG帝12 小时前
项目中使用el-table实现行合并及合并后序号不连续解决方案
前端·vue.js
东华帝君12 小时前
React Hook Form —— useForm 和 FormProvider+useFormContext
前端
小p12 小时前
react学习3: 闭包陷阱
前端·react.js
朴shu12 小时前
Delta数据结构:深入剖析高效数据同步的奥秘
javascript·算法·架构
该用户已不存在12 小时前
Vibe Coding 入门指南:从想法到产品的完整路径
前端·人工智能·后端
Pedro12 小时前
Flutter - 日志不再裸奔:pd_log 让打印有型、写盘有序
前端·flutter
申阳12 小时前
Day 3:01. 基于Nuxt开发个人呢博客项目-初始化项目
前端·后端·程序员
三小河13 小时前
解决 React + SSE 流式输出卡顿:Nginx 关键配置实战
前端·架构·前端框架