Flutter 玩转微信——微信首页

概述

• 这篇文章主要介绍的是如何利用Flutter搭建微信首页的功能，详细讲述该功能实现过程中所运用到的技术，以及遇到问题后如何解决的心得体会。该功能虽然粗看时看似简单，但是细作时发现其功能逻辑复杂，内部细节处理较高，当然其中涵盖了Flutter中大部分知识点，笔者相信初学者通过实现该功能后，定会对所学的Flutter知识的掌握上更上一层楼。

• 笔者此次主要实现了微信首页的以下几个功能点：

  • 消息的侧滑删除
  • 下拉显示小程序
  • 点击导航栏 + 按钮，弹出菜单栏
  • 点击搜索框，弹出搜索页

• 笔者希望初学者通过实现上面👆的功能点，能够在学习Flutter的过程中有所帮助，当然笔者必将知无不言、言无不尽，梳理实战过程之问题，总结解决问题之方案，让尔等知其然，知其所以然。望能抛玉引砖，摆渡众生，如有纰漏，还望斧正。

• 源码地址：flutter_wechat

效果图

GIF	微信页	菜单栏
小程序	搜索页

知识储备

• Stack + Positioned 布局
• Transform.translate(平移)、Transform.scale(放大)、Opacity(设置子部件透明度)
• 滚动监听及控制
• 动画组件使用(AnimatedPositioned、AnimatedOpacity、ScaleTransition)
• 状态管理Provider
• 监听键盘弹起
• 通过GlobalKey 获取某个 Widget 的尺寸

功能

一、消息的侧滑删除

侧滑删除的功能，主要利用 flutter_slidable 插件来实现的，其具体实现过程以及细节处理的心得体会，与笔者前面写过的 Flutter 玩转微信——通讯录 文章中详细说明如何实现联系人侧滑删除的功能类似，这里笔者就不再一一赘述。有兴趣的同学，还请自行移步。

二、下拉显示小程序

下拉显示小程序，以及显示后上拉隐藏小程序的功能，个人认为在实现过程是比较复杂的，涵盖大部分Flutter必备的知识点，所以笔者会详述其实现过程中遇到的坑以及填坑的方法。

• UI搭建

由于考虑到下拉过程中，内容页、导航栏、三个点、小程序都会层叠展示，所以整个微信页面这里采取的是 Stack + Positioned 布局方案，关于UI构建的细节，大家参看源码即可，这里就不再赘述，具体伪代码如下：

/// 构建子部件
Widget _buildChildWidget() {
  return Container(
    constraints: BoxConstraints.expand(),
    color: Style.pBackgroundColor,
    child: Stack(
      overflow: Overflow.visible,
      // 注意层叠顺序，她不像 Web 中有 z-index 的概念
      children: <Widget>[
        // 导航栏
        // 内容页
        // 三个点部件
        // 小程序
        // 菜单
      ],
    ),
  );
}

特别注意：Stack 中子部件(Positioned)添加顺序，最后面添加的在最上面，她不像 Web 中的样式有z-index的概念。

• 功能分析

大家可以对比你手机上的微信首页，下拉显示小程序的功能上其实涵盖了，下拉显示小程序和上拉隐藏小程序两个过程的逻辑处理，当然这才是一个真正的闭环，有显示就会有隐藏。这里笔者就只拿以 下拉逻辑 为例，详细讲解其中的逻辑分析和细节处理。上拉逻辑 大家可以反推即可。

❗️下拉逻辑

1. 手指下拉内容页整个过程中，导航栏 的顶部会随着手指下拉而向下偏移(offset)，偏移距离等于下拉距离。
2. 继续下拉到 临界点① = 60时，出现一个小球逐渐放大，放大系数(scale) = 0，当 偏移量 > 临界点① 时，scale 会逐渐变大；反之，scale = 0 。
3. 继续下拉到 临界点② = 90时，此过程中，小球 会放大到最大值(scale = 2)。即offset：临界点① --> 临界点②，scale: 0 --> 2。继
4. 续下拉到 临界点③ = 130时，此过程中，小球会生成两个小球，一个小球逐渐左平移到最大值，一个小球逐渐右平移到最大值，其本身也缩放到原始值(scale = 1)。
5. 继续下拉到 临界点④ = 180时，此过程中，三个球的透明度(opacity)从 1.0 --> 0.2 变化，以及小程序模块透明度(opacity)从0 --> 0.5变化且自身缩放比例(scale)为(scale = 0.4)。
6. 继续下拉 offset > 临界点④时，三个小球的透明度恒等于0.2，以及小程序模块透明度恒等于0.5且自身缩放比例(scale)恒为(scale = 0.4)。

注意： 以上👆过程都是用户手指都是处于拖拽状态，也就是手指没有离开屏幕。那么手指离开屏幕后，有会发生什么状况呢，请听笔者一一道来。

7. 手指释放的一瞬间，判断下拉偏移量offset 是否大于 临界点② = 90， 若大于，则显示小程序模块，反之，则隐藏小程序模块。
8. 显示小程序的过程中，导航栏的底部偏移到屏幕的底部、内容页的顶部平移到屏幕的底部，小程序的透明度由0.5 --> 1且缩放比例由0.4 --> 1、底部导航栏隐藏。

• 功能实现

通过上面的功能分析，我们不难给出代码实现。但是必须明确的是，整个下拉或上拉过程中，我们必须依赖一个非常重要的数据——滚动偏移量(offset)，那么我们必须得监听列表的滚动，从而根据偏移量来完成整个UI逻辑。关