项目背景：在学习比站猫哥的“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，彻底解决底部导航栏穿透问题

彻底解决Flutter项目底部导航栏穿透问题的更多相关文章

  1. Flutter - BottomNavigationBar底部导航栏切换后，状态丢失

    如果你用过BottomNavigationBar.TabBar.还有Drawer,你就会发现,在切换页面之后,原来的页面状态就会丢失. 要是上一页有一个数据列表,很多数据,你滚动到了下头,切换页面后, ...

  2. Flutter - 创建底部导航栏

    之前写过的一篇文章介绍了 Flutter - 创建横跨所有页面的侧滑菜单, 这次就一起来学习一下底部导航栏. 底部导航栏在ios平台上非常常见,app store就是这样的风格.还有就是大家最常用的微 ...

  3. Flutter - BottomNavigationBar底部导航栏切换后，状态丢失。底部

    import 'package:flutter/material.dart'; import './pages/home_page.dart'; import './pages/book_page.d ...

  4. Android开源项目——带图标文字的底部导航栏IconTabPageIndicator

    接下来的博客计划是,在<Android官方技术文档翻译>之间会发一些Android开源项目的介绍,直接剩下的几篇Android技术文档发完,然后就是Android开源项目和Gradle翻译 ...

  5. Flutter实战视频-移动电商-03.底部导航栏制作

    03.底部导航栏制作 material是谷歌退出的 还有另外的一种:cupertino是IOS的风格 我们底部的导航栏,静态的widget是不合适的,这垃圾我们用到动态的widget 这重新改成动态的 ...

  6. Flutter——BottomNavigationBar组件（底部导航栏组件）

    BottomNavigationBar常用的属性: 属性名 说明 items List<BottomNavigationBarItem> 底部导航条按钮集合 iconSize icon c ...

  7. Flutter 底部导航栏bottomNavigationBar

    实现一个底部导航栏,包含3到4个功能标签,点击对应的导航标签可以切换到对应的页面内容,并且页面抬头显示的内容也会跟着改变. 实际上由于手机屏幕大小的限制,底部导航栏的功能标签一般在3到5个左右,如果太 ...

  8. Flutter移动电商实战 --（4）打通底部导航栏

    关于界面切换以及底栏的实现可参考之前写的一篇文章:Flutter实 ViewPager.bottomNavigationBar界面切换 1.新建4个基本dart文件 在pages目录下,我们新建下面四 ...

  9. Flutter移动电商实战 --（3）底部导航栏制作

    1.cupertino_IOS风格介绍 在Flutter里是有两种内置风格的: material风格: Material Design 是由 Google 推出的全新设计语言,这种设计语言是为手机.平 ...

  10. 【Flutter学习】基本组件之BottomNavigationBar底部导航栏

    一,概述 BottomNavigationBar即是底部导航栏控件,显示在页面底部的设计控件,用于在试图切换,底部导航栏包含多个标签.图标或者两者搭配的形式,简而言之提供了顶级视图之间的快速导航. 二 ...

随机推荐

  1. java 实现自定义框架

    简介 实现LayoutManager 接口即可,只要实现5个接口杰克 分别是 void addLayoutComponent(String s, Component c); void removeLa ...

  2. python 二维数组取值

    简介 a = np.ones((5,5)) 可以通过 a[1,1] a[1][1] 这两种方式取出数值,本质上是一样的.

  3. Android系统资源管理与电池优化策略详解

    Android系统作为全球最流行的移动操作系统之一,其性能优化一直是开发者和用户关注的焦点.在有限的硬件资源下,如何高效地管理资源并延长电池续航,是提升用户体验的关键.本文将聚焦于Android系统的 ...

  4. ViewModelProviders报错

    //创建ViewModel实例 //MyViewModel model = ViewModelProviders.of(this).get(MyViewModel.class); //该方法已弃用 M ...

  5. 使用Fiddler抓包解密移动端HTTPS 需ROOT

    背景 在之前的一期文章中挖了个坑,超星学习通逆向接口参数加密分析,说会写一期抓包的文章,过了一年半,终于想起来填这个坑了. 前提 电脑安装Fiddler 手机ROOT并安装LSPosed,安装Just ...

  6. Day9 备战CCF-CSP练习

    Day9 题目描述 在学习了文本处理后,小 \(P\) 对英语书中的 \(n\) 篇文章进行了初步整理. 具体来说,小 \(P\) 将所有的英文单词都转化为了整数编号. 假设这 \(n\) 篇文章中共 ...

  7. SciTech-POLIR-Statistics-重要的统计数据来源 与 数据建模

    重要数据来源: "联合国"组织 ** "世界银行" **"世界卫生组织" 欧盟 德国 法国 意大利 瑞典 其他的成员国家 英国 美国(例FD ...

  8. freeswitch: ESL中如何自定义事件及自定义事件的监听

    虽然freeswitch已经内置了一些标识的事件,比如:CHANNEL_CREATE(发起呼叫时触发),CHANNEL_HANGUP_COMPLETE(电话挂断时触发)...,但是有时候我们想根据业务 ...

  9. Windows11系统如何使用虚拟桌面的问题

    有很多电脑基地的小伙伴都不知道,在win11系统特有一个叫虚拟桌面的功能.这个功能能够实现多个桌面运行不同的软件,而且相互之间不会互相影响,非常方便.特别在玩游戏的时候,可以随时切换桌面,使用方便.那 ...

  10. Win11系统驱动更新关掉的问题

    有很多雨林木风系统的小伙伴,都不知道在win11系统中,驱动都是自动更新的,始终在最新的驱动程序版本下运行,以提高系统的性能和稳定性,但是,一些特定的驱动版本可能导致计算机不兼容或者导致系统崩溃,那么 ...