Flutter Web网站之Jetpack成型
往期
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: [_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的道路上提供一丢丢的帮助。
发表评论 (审核通过后显示评论)：