往期
上期回顾
上期我们做了一个能兼容不同屏幕大小的主页，来适配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的道路上提供一丢丢的帮助。
