彻底解决Flutter项目底部导航栏穿透问题

项目背景:在学习比站猫哥的“2022 Flutter3 Getx Woocommerce App 从零开始实战课程 | 01 课程”时,按照课程指导逐步进行项目代码编写。视频地址:

https://www.bilibili.com/video/BV1xY411F7es/?spm_id_from=333.999.0.0&vd_source=7c7ae5cc1dbb2453e1eb43950a4264a3。

(1)问题表现:底部导航栏存在穿透问题
在编写主界面的底部导航栏是,发现存在底部导航栏穿透问题。就是在App上点击底部导航栏按钮边沿时,会触发其背景组件的点击响应。

(2)使用Android Studio 的 DevTools工具分析问题原因
经过使用Android Studio 的 DevTools工具,对底部导航栏进行布局透视分析,发现底部导航栏的各个组件存在明显的padding内边距。通过DevTools查到底部导航栏BottomAppBar默认内边距为:
padding: const EdgeInsets.fromLTRB(16.0,12.0,16.0,12.0), // Left Top Right Bottom

 

(3)解决问题

发现了问题根源,解决就很简单,将底部导航栏 BottomAppBar 组件的padding内边距设置为0即可。关键代码如下:
// 通过为 \lib\common\widgets\navigation.dart 组件的 BottomAppBar 指定 padding: EdgeInsets.zero
return BottomAppBar(
padding: EdgeInsets.zero, // 将BottomAppBar默认边距设为0,彻底解决底部导航栏穿透问题

 

 

posted on   patton88  阅读(107)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· Trae初体验

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示