阿里 Flutter-go 專案拆解筆記（二）
Flutter-go 專案地址是：https://github.com/alibaba/flutter-go
上文
我們分析了入口檔案，知道了Flutter-go
在專案入口檔案中對資料進行了初始化，同時使用了Router
路由
這篇文章主要拆解首頁的實現。首頁檔案的路徑如下：
'package:flutter_go/views/first_page/home.dart';
從專案的演示效果上可以看出首頁（home.dart）
主要包含
- 搜尋
- 底部可滑動 tab（全域性）
搜尋（全域性）
在home.dart
檔案中可以看到搜尋框是在AppBar
中實現的
appBar: new AppBar(title: buildSearchInput(context)),
搜尋的功能還是有點複雜的，我們之後再來拆解一下整個的搜尋功能，現在暫時知道搜尋是存在於四個 Tab 的頂部。如果想先看搜尋原始碼的可以點選這裡檢視 。
底部導航欄
- 底部 Tab如何實現？
- 漸變如何實現？
底部 Tab 實現
在home.dart
原始碼中可以看到，底部Tab
的實現是利用l了TabBarView+TabBar
實現的。
TabBarView
的作用是：顯示與當前選中的 Tab 相對應的頁面檢視。通常和TabBar一起使用。從下面原始碼可以看出在TabBarView
中構建出了四個頁面，關於TabBarView
的更多資訊請點選這裡
body: new TabBarView(controller: controller, children: <Widget>[ new FirstPage(), new WidgetPage(db), new CollectionPage(), FourthPage() ]),
而底部的 Tab 實現是利用了bottomNavigationBar + TabBar
實現的，關於TabBar
的更多資訊請點選這裡
。原始碼實現如下：
bottomNavigationBar: Material( color: const Color(0xFFF0EEEF), //底部導航欄主題顏色 child: SafeArea( child: Container( height: 65.0, ... child: TabBar( controller: controller, indicatorColor: Theme.of(context).primaryColor, //tab標籤的下劃線顏色 // labelColor: const Color(0xFF000000), indicatorWeight: 3.0, labelColor: Theme.of(context).primaryColor, unselectedLabelColor: const Color(0xFF8E8E8E), tabs: myTabs), ), ), ),
滑動漸變
這裡的漸變實現使用的是BoxDecoration Widget
，它能實現改變
邊框、圓角、陰影、形狀、漸變、背景影象
BoxDecoration
的簡單使用可檢視這篇文章Flutter Decoration背景設定（邊框、圓角、陰影、形狀、漸變、背景影象等）
/// 漸變效果 decoration: BoxDecoration( color: const Color(0xFFF0F0F0), boxShadow: <BoxShadow>[ BoxShadow( color: const Color(0xFFd0d0d0), blurRadius: 3.0, spreadRadius: 2.0, offset: Offset(-1.0, -1.0), ), ], ),
在檢視原始碼的時候還發現了一些Widget
，比如SafeArea
，通過搜尋可知
大部分情況下，使用SafeArea
能很好的解決劉海，不規則螢幕的顯示問題，防止介面溢位。所以在實現 UI 的時候要考慮更多的情況，適配更多的手機螢幕。
在實現頁面切換這裡，也有一個技巧
在點選 tab 的時候有使用了一個判斷，原始碼如下：
/// 底部tab點選
void _onTabChange() {
if (this.mounted) {
this.setState(() {
appBarTitle = tabData[controller.index]['text'];
});
}
}
除非mounted為true，否則呼叫setstate是一個錯誤。這也是為了防止要切換的頁面被銷燬但是還要呼叫setstate
重新整理頁面。