阿里 Flutter-go 项目拆解笔记（二）

古城微笑少年丶 2022-03-10 07:07 149阅读 0赞

**Flutter-go 项目地址是：[https://github.com/alibaba/flutter-go][https_github.com_alibaba_flutter-go]**

**[上文][Link 1]** 我们分析了入口文件，知道了`Flutter-go`在项目入口文件中对数据进行了初始化，同时使用了`Router`路由

这篇文章主要拆解首页的实现。首页文件的路径如下：  
`'package:flutter_go/views/first_page/home.dart';`

从项目的演示效果上可以看出首页`（home.dart）`主要包含

*  搜索
 *  底部可滑动 tab（全局）

### 搜索（全局） ###

> 在`home.dart`文件中可以看到搜索框是在`AppBar`中实现的

appBar: new AppBar(title: buildSearchInput(context)),

搜索的功能还是有点复杂的，我们之后再来拆解一下整个的搜索功能，现在暂时知道搜索是存在于四个 Tab 的顶部。如果想先看搜索源码的可以 [点击这里查看][Link 2]。

### 底部导航栏 ###

*  底部 Tab 如何实现？
 *  渐变如何实现？

#### 底部 Tab 实现 ####

在`home.dart`源码中可以看到，底部`Tab`的实现是利用l了**TabBarView+TabBar**实现的。

`TabBarView`的作用是：显示与当前选中的 Tab 相对应的页面视图。通常和TabBar一起使用。从下面源码可以看出在`TabBarView`中构建出了四个页面，关于`TabBarView`的更多信息 [请点击这里][Link 3]

body: new TabBarView(controller: controller, children: <Widget>[
            new FirstPage(),
            new WidgetPage(db),
            new CollectionPage(),
            FourthPage()
          ]),

而底部的 Tab 实现是利用了**bottomNavigationBar + TabBar** 实现的，关于`TabBar`的更多信息 [请点击这里][Link 4]。源码实现如下：

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背景设定（边框、圆角、阴影、形状、渐变、背景图像等）][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`刷新页面。

[https_github.com_alibaba_flutter-go]: https://github.com/alibaba/flutter-go
[Link 1]: https://blog.csdn.net/ITxiaodong/article/details/88374164
[Link 2]: https://github.com/alibaba/flutter-go/blob/master/lib/components/search_input.dart
[Link 3]: https://flutterchina.club/catalog/samples/TabBarView_index/
[Link 4]: https://flutterchina.club/catalog/samples/TabBar_index/
[Flutter Decoration]: https://blog.csdn.net/chenlove1/article/details/83627831