【flutter对屏幕底部有手势区域(如：一条横杠)导致出现重叠遮挡】

-1

最新推荐文章于 2025-11-25 11:07:09 发布

原创最新推荐文章于 2025-11-25 11:07:09 发布 · 250 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #javascript #前端

关键：
1.使用SafeArea保持内容在安全显示区域内
2.MediaQuery.of(context).padding.bottom获取底部安全区域高度
3.遮挡住由于显示到抬高了显示区域在底部出现的透明或半透明

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()//底部导航栏布局
                    )
                  ],
                )
              )