【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()//底部导航栏布局
                    )
                  ],
                )
              )
相关推荐
南屿im1 天前
别再被引用坑了!JavaScript 深浅拷贝全攻略
前端·javascript
想要一辆洒水车1 天前
vuex4源码分析学习
前端
sophie旭1 天前
一道面试题,开始性能优化之旅(6)-- 异步任务和性能
前端·javascript·性能优化
年少不知有林皇错把梅罗当球王1 天前
vue2、vue3中使用pb(Base64编码)
前端
FanetheDivine1 天前
常见的AI对话场景和特殊情况
前端·react.js
sophie旭1 天前
一道面试题,开始性能优化之旅(5)-- 浏览器和性能
前端·面试·性能优化
lypzcgf1 天前
Coze源码分析-资源库-编辑知识库-前端源码-核心组件
前端·知识库·coze·coze源码分析·智能体平台·ai应用平台·agent平台
小墨宝1 天前
web前端学习 langchain
前端·学习·langchain
北城以北88881 天前
Vue--Vue基础(一)
前端·javascript·vue.js
IT_陈寒1 天前
Python 3.12新特性实战:5个让你的代码提速30%的性能优化技巧
前端·人工智能·后端