【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()//底部导航栏布局
                    )
                  ],
                )
              )
相关推荐
sugar__salt6 小时前
从网页小游戏到数据可视化:掌握 HTML5 Canvas 核心能力
前端·信息可视化·html5
北极星日淘6 小时前
前端 i18n 中日双语交互 + 翻译客服接口联动方案|日系海淘平台中文友好化开发实战
前端·交互
現実逃避と6 小时前
WIN10 Edge连续关闭多个标签页导致资源管理器崩溃临时解决办法
前端·edge
HjhIron6 小时前
CSS 3D 世界:从盒子模型到三维空间动画
javascript·css
VidDown6 小时前
显卡处理视频技术详解:从硬解码到 NVENC,GPU 如何让视频处理起飞?
javascript·编辑器·音视频·视频编解码·视频
jay神7 小时前
基于 FastAPI + Vue 的宠物领养管理系统
前端·vue.js·python·毕业设计·fastapi·宠物
lichenyang4537 小时前
鸿蒙 Web 容器(五·完结):闭环回传、容器治理,兼谈 AtomicServiceEnhancedWeb
前端
lichenyang4537 小时前
鸿蒙 Web 容器(四):ArkTS 拿到请求后,怎么「按 action 找能力」?
前端
lichenyang4537 小时前
鸿蒙 Web 容器(三):H5 怎么「调」到 ArkTS?
前端
代码不加糖7 小时前
Proxy能够监听到对象中的对象的引用吗?
开发语言·前端·javascript