patton88

項目背景：在學習比站貓哥的“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，徹底解決底部導航欄穿透問題