【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()//底部导航栏布局
                    )
                  ],
                )
              )
相关推荐
指尖的记忆5 分钟前
前端 Monorepo 实战指南:仓库多到切疯?
前端
csdn2015_12 分钟前
java 把对象转化为json字符串
java·前端·json
shughui14 分钟前
Fiddler(二):自动转发(AutoResponder)功能详解
前端·测试工具·fiddler
初见雨夜17 分钟前
OpenAI 官方出手:把 Codex 接进 Claude Code
前端·openai·ai编程
前端付豪17 分钟前
实现消息级操作栏
前端·人工智能·后端
GISer_Jing20 分钟前
Claude Code的「渐进式披露」——让AI Agent从“信息过载”到“精准高效”
前端·人工智能·aigc
apcipot_rain27 分钟前
HTML知识概述
前端·javascript·html
leiming634 分钟前
巧用 FreeRTOS 任务通知作“邮箱”:NeoPixel 灯环控制实战
java·前端·算法
茶底世界之下40 分钟前
Harbeth:高性能Metal图像处理库,让你的图片处理速度飞起来!
前端·github·swift
wangfpp43 分钟前
Pretext 如何颠覆前端文本布局
前端