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的道路上提供一丢丢的帮助。

你可能感兴趣的:(Flutter Web网站之Jetpack成型)