Flutter 31: 圖解自定義底部狀態列 ACEBottomNavigationBar (二)

Flutter 安卓開發 · 發表 2019-01-29 21:33:36

摘要：小菜前兩天剛學習了一下自定義底部狀態列，現補充固定凸出中間 Item 位的樣式，並生成外掛發不到 Pub 中。補充樣式 (中間位凸出) 小菜補充一種中間位凸出樣式， item 總數為奇數時中間位才會凸出，而偶數時不會凸出，預設其他 item 為普通 nomal 樣式，支援圖片或...

小菜前兩天剛學習了一下自定義底部狀態列，現補充固定凸出中間 Item 位的樣式，並生成外掛發不到 Pub 中。

補充樣式 (中間位凸出)

小菜補充一種中間位凸出樣式， item 總數為奇數時中間位才會凸出，而偶數時不會凸出，預設其他 item 為普通 nomal 樣式，支援圖片或 icon 以及文字變色等效果。

enum ACEBottomNavigationBarType {
normal,// 普通型別，選中變色，樣式不變
zoom,// 圖片或icon變大，此時隱藏文字，支援變色
zoomout,// 圖片或icon變大，並凸出顯示，文字顯示，支援變色
zoomoutonlypic,// 圖片或icon變大，並凸出顯示，文字隱藏
protruding,// 中間位凸出顯示，其餘位為普通型別
}

小菜在前幾種型別中配置效果主要是在 NavigationItem 中實現的，而固定凸出位樣式只有在中間顯示，所以小菜準備在 ACEBottomNavigationBar 中進行配置，優先判斷 item 總數，再將中間位凸出展示。其中小菜偷個懶，因為只有在中間位展示，所以在向子 NavigationItem 傳 type 型別是傳遞的是 nomel 型別，只需判斷中間位是否展示即可。

Widget protrudingWid() {
Widget proWid;
if (widget.items.length % 2 == 0) {
proWid = Container(width: 0.0, height: 0.0);
} else {
proWid = Positioned.fill(
top: -30,
child: Container(
child: Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Stack(alignment: Alignment.center, children: <Widget>[
SizedBox(
height: 60.0,
width: 60.0,
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: widget.protrudingColor != null
? widget.protrudingColor
: Colors.white),
child: Padding(
padding: const EdgeInsets.all(0.0),
child: protrudingItemWid(
widget.items[protrudingIndex]))))
]))));
}
return proWid;
}

Widget protrudingItemWid(NavigationItemBean item) {
Widget itemWidget;

if (item.image != null) {
itemWidget = GestureDetector(
child: Image(image: item.image),
onTap: () {
widget.onTabChangedListener(protrudingIndex);
_setSelected(item.key);
});
} else {
itemWidget = IconButton(
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
alignment: Alignment(0, 0),
icon: Icon(
item.icon,
size: 40.0,
color: item.iconUnSelectedColor,
),
onPressed: () {
widget.onTabChangedListener(protrudingIndex);
_setSelected(item.key);
});
}
return itemWidget;
}

釋出 Pub 外掛

小菜共整理了五種型別，基本可以實現小菜日常需要，嘗試生成第一版外掛併發布到 Pub 倉庫。

1. 建立外掛 plugin

File -> New -> New Flutter Project... -> Flutter Plugin實現方式與 Android 無異，主要是在 lib 中實現功能，並在 example 中實現基本的呼叫，之後雙傳到 git 上；

2. 釋出 Pub 倉庫

按照官網介紹，其實很方便，但其中有很多需要注意的地方，前期準備外網環境與谷歌郵箱賬號，小菜接下來詳細介紹遇到的問題。

問題一：完善資訊與包大小

在執行第一步 flutter packages pub publish --dry-run 遇到的 Warning 是基本資訊不完整以及包大於 100M ，於是在 pubspec.yaml 檔案中補充 author/homepage 資訊，注意 author 中建議新增郵箱，之後刪除無用的快取檔案；再次執行即可。