【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()//底部导航栏布局
                    )
                  ],
                )
              )
相关推荐
熊的猫18 分钟前
校招生问我在vue中,什么时候该用 render 函数?
前端·javascript·vue.js
striver_#33 分钟前
京东前端社招面经
前端·面试
掘金安东尼34 分钟前
用 CSS random() 来掷骰子
前端·css·面试
前端小巷子35 分钟前
Vue 事件系统
前端·vue.js·面试
訾博ZiBo41 分钟前
VibeCoding 时代来临:如何打造让 AI 秒懂、秒改、秒验证的“AI 友好型”技术栈?
前端·后端
excel1 小时前
彻底理解缓冲区:从概念、背压到可运行的 Fetch 流式示例
前端
海的天空16613 小时前
Flutter旧版本升级-> Android 配置、iOS配置
android·flutter·ios
伍哥的传说4 小时前
Vue 3 useModel vs defineModel:选择正确的双向绑定方案
前端·javascript·vue.js·definemodel对比·usemodel教程·vue3.4新特性·vue双向绑定
胡gh9 小时前
页面卡成PPT?重排重绘惹的祸!依旧性能优化
前端·javascript·面试