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

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