阿里 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刷新頁面。