往期

• Flutter Web网站搭建教程
• Flutter Web 网站之主页框架搭建

上期回顾

上期我们做了一个能兼容不同屏幕大小的主页，来适配Web、Android等平台。主要用到了MediaQuery来动态获取屏幕的宽度，来动态适配UI。

本期内容

好消息，我申请的域名jetpack.net.cn已经下来了，这次的目标就是让网站正式成型，完善网站的内容。

• 完成Jetpack UI设计以及实现

啰嗦几句

读过我之前博客一个在线的Jetpack模版项目生成工具应该知道，我做了一个在线的Android Jetpack模版代码生成器，而这次我申请的域名jetpack.net.cn，也是为了让它有一个好的归宿，毕竟我自己的网站ibaozi.cn当初的用意是展示简历，博客，博主推荐位等等，跟Jetpack并没有血缘关系，后来，经过公司项目的Flutter转型，突然发现，我们构建Android项目的时候，用官方提供的Jetpack套库，可以轻松的创建一个稳定的项目，可Flutter并没有这样一个套库，于是我自发的想做这样一件事情，去收集目前github中开源的库，并提供相关简介和用例，辅助你去构建一个完整的Flutter项目。说完我的目的，就不啰嗦了，接下来，让我们开始开发。

分包处理

随着代码量的增加，业务的复杂，逐渐导致项目维护困难，简单的做一下分包处理，提高维护的效率，现在项目较小，分包处理方式如下

• data 创建基础的Bean对象，和处理数据的来源
• pages 创建各个界面的包
• styles 颜色以及文本样式等主题配置管理
• util 工具
• widgets 自定义widgets
  这个分包只适合初期，有一个很凸显的问题就是如果page页面越来越多后，页面不太好区分，特别是需要抽离某个页面的时候可能不太好处理依赖，这样我们就引入模块化的概念，将一组业务的相关依赖放到一起，这样就可以轻松的做的抽离。有些人喜欢从一开始就设计的很完美，我的经验告诉我，一切先从简设计，保证满足业务的同时，尽量的做到更简单，决定业务成败的是产品，而不是技术，技术只是打辅助，打得好才能赢的更漂亮。同意的留言扣1，哈哈😄

Jetpack UI

大屏UI

Flutter Jetpack
中屏UI

小屏幕UI

Jetpack 实现

下面我来说下UI实现的一些细节，在本次页面的组建过程中主要用到如下组件

• Align 负责控制子view的位置，左上、左下，右中等
• TabBar 跟Android中的tabBar一样，一个按钮选择器
• Expanded 尽可能的占用最大空间，可以用flex控制比例
• PageView 左右或者上下滑动的页面
• SingleChildScrollView 让子view可以滑动的容器
• Column 纵向容器
• Row 横向容器
• SizedBox 固定宽度或者高度的盒子，组件之间增加间距用
• InkWell 给子组件添加onTap点击事件处理
• Card 卡片样式

Home主页代码

/// Column 纵向展示 TabBar、Body
 @override
  Widget build(BuildContext context) {
    return Container(
      color: tabBarBgColor,
      child: Column(
        children: <Widget>[_buildTabBar(), _buildBody()],
      ),
    );
  }
///构建TabBar
/// Align 控制子组件局左
/// TabBar 构建选择器
/// _tabController 用来控制TabBar的index属性
/// isScrollable 设置为true，这样TabBar会默认包裹内容，关闭等比分配子组件
  _buildTabBar() {
    return Align(
      alignment: Alignment.topLeft,
      child: TabBar(
        indicatorColor: titleColor,
        labelColor: labelColor,
        controller: _tabController,
        isScrollable: true,
        tabs: _tabs
            .map((e) => Tab(
                  text: e,
                ))
            .toList(),
      ),
    );
  }
/// Expanded 用来撑满剩余的屏幕空间
/// PageView 用来构建横向滑动View，根据index构建不同页面
/// scrollDirection 控制滑动方向
/// physics ：NeverScrollableScrollPhysics 关闭横向滑动，因为我们的Flutter Jetpack是上下滑动的，如果左右滑动打开的话会导致滑动不顺畅。
  _buildBody() {
    return Expanded(
      child: PageView.builder(
        controller: _pageController,
        itemCount: 2,
        scrollDirection: Axis.horizontal,
        physics: NeverScrollableScrollPhysics(),
        onPageChanged: (index) {
          _tabController.animateTo(index);
        },
        itemBuilder: (BuildContext context, int index) {
          if (index == 0) return PageFlutterJetPack();
          if (index == 1) return PageAndroidJetPack();
          return Container();
        },
      ),
    );
  }

Flutter Jetpack UI 实现

PageFlutterJetPack页面代码如下：

先整体看下，build函数构建一个Row横向的布局，并用Expanded等分，以3:1的方式分配如图所示
ResponsiveWidget.isLargeScreen或者ResponsiveWidget.isMediumScreen屏幕时显示Tags部分，小屏幕挪到了比例为3的部分的最下面。
继续往下实现：

首先用SingleChildScrollView实现上下可滚动，再用Container实现一个内边距，紧接着用Column实现纵向排版，跟堆积木一样，先构建内容的头_buildHead，再构建组件库的标题_buildComponentsTitle，接着就是组件的内容_buildComponentsContent，依次实现四个，最后在小屏幕的时候将tags挪到最下面， ResponsiveWidget.isSmallScreen(context) ? _buildTags()就是这样，有个小细节就是在SingleChildScrollView中使用GridView的时候，应为都是可滚动的，并且都是可以无限延伸的，所以需要确定GridView的高度，这样才能保证UI绘制的正确性，所以需要通过GridView的属性shrinkWrap和physics来让UI绘制正常，shrinkWrap设置为true实现子View全部绘制出来，这样缺少缓存，一定程度上浪费了内存，physics设置为NeverScrollableScrollPhysics关闭滚动。
还有个小的细节，为了适配不同屏幕大小这里，给GridView的列数做了动态配置，这样就实现了不同屏幕自动适配不同列的UI。
最下面是_buildFooter，这里放了备案号，这是网站必须的
整体页面已经完成，具体请转github代码查看完整实现，

ToDo

• 示例部准备下期实现，跳转至详情页面，并展示用例。源码已经完成点击即可跳转至github。
• Tags 部分下期实现，这部分也需要新的UI展现，标签的功能类似与搜索，提供更快捷的方式查找想要的功能。
• 留言功能设计，在你们使用过程中肯定会有不同的建议，有了这个功能就能知道你们的心声，所以这也是我们需要的实现的一个功能。
• 优秀的项目推荐，有很多优秀的项目等待着我们去发现，我一个人的能力有限，如果有更多的人来推荐，会不断丰富我们的Jetpack内容。
• 博客，这里考虑到有很多优秀的大佬，写过相关技术博客，帮你寻找最优秀的资源。功能设计如下图新增按钮。

Go on

不知道你有没有觉得，flutter的web表现不是很好，尽管页面设计的足够简单，但还是会有滑动不顺畅的表现，特别是在android手机上的表现，但相信在flutter web 正式版到来的时候能有很大的改善。我们期待吧。

结束

网站jetpack.net.cn，欢迎常来，也希望能在你学习Flutter的道路上提供一丢丢的帮助。