【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()//底部导航栏布局
                    )
                  ],
                )
              )
相关推荐
搬砖的kk1 天前
Flutter OH 3.35.7 Dev 版本发布 | 快速体验指南
flutter
pas1361 天前
28-mini-vue customRender
前端·javascript·vue.js
REDcker1 天前
web 端 H265 软解码实现原理与使用说明
前端·音视频·播放器·h265·解码·软解码
倚栏听风雨1 天前
深度拆解:从 npm install 到手写一个全局 CLI 工具
前端
未来猫咪花1 天前
tp_router: 再也不用手动写路由表了
flutter
攀登的牵牛花1 天前
前端向架构突围系列 - 架构方法(二):UML前端建模的一般方法和工具
前端·前端框架·uml
代码猎人1 天前
Object.assign和扩展运算符是深拷贝还是浅拷贝,两者有什么区别
前端
秋天的一阵风1 天前
🎥解决前端 “复现难”:rrweb 录制回放从入门到精通
前端·javascript·开源
意法半导体STM321 天前
【文末送NUCLEO-G431RB】一文说明白STM32G4双Bank启动与升级 LAT1596
前端·数据库·stm32·单片机·嵌入式硬件·mcu·stm32开发
chao_6666661 天前
React Native + Expo 开发指南:编译、调试、构建全解析
javascript·react native·react.js