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

2024年1月25日 215次阅读 来源: _龙衣

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刷新页面。

    原文作者：_龙衣
    原文地址: https://www.jianshu.com/p/d53f0f5859ba
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞