Flutter快学快用24讲--19 项目实战：实践 Flutter 交友功能

本课时我会和大家一起来完善 App 的其他功能，其中包括：我的好友、我的消息、系统设置和搜索功能。按照我们之前课时所学的技术点，我们可以通过绘制组件树+布局来实现，在实现过程中也会介绍一些新的知识点，接下来我们就分别看下这几个功能的实现过程。

我的好友

我们首先看下要实现的效果图，如图 1 所示。

图 1 我的好友效果图

根据图 1 的效果图，我们绘制出组件树+布局，如图 2 所示。

图 2 组件树

图 2 很清晰地分析出了界面所转化的组件树，由于这里都不涉及动态组件，因此将 Text 和 Image 作为一个 card 组件即可。代码实现逻辑和我们之前介绍的推荐页面和关注页面基本一样，接下来我们看下“我的消息”的实现。

我的消息

我们先来看下“我的消息”要实现的界面效果，如图 3 所示。

图 3 我的消息界面效果

根据图 3 的效果图，我们绘制出组件树+布局，如图 4 所示。

图 4 我的消息组件树+布局

图 4 就非常清晰地描述了我们整个 UI 构造：

• 图 4 中的 Row-Expanded-1 和 Row-Expanded-5 代表的是使用 flex 布局，左右屏幕占比 1 比 5；

• 图 4 中的 first_line 代表的是图 3 右侧的用户昵称和时间一行；

• 图 4 中的 spaceBetween 是 Row 的 mainAxisAlignment 属性，代表的是两端对齐，具体这部分代码如下。

/// 获取右侧的首行 
Widget _getFirstLine() { 
  return  Row( 
    mainAxisAlignment: MainAxisAlignment.spaceBetween, 
    children: <Widget>[ 
      Text( 
        userMessage.userInfo.nickName, 
        style: TextStyles.commonStyle(0.8, Colors.black), 
      ), 
      _getMessageTimeSection(userMessage.messageTime), 
    ], 
  ); 
} 

由于这里也没有涉及组件的复用和动态组件，因此这里也建议将整个组件内容设计为一个组件叫作 message_card。为了代码维护性，可以使用类函数来封装小组件，为后续重构抽象为通用组件做准备，例如这里我们将 first_line 设计为一个类函数，如上代码中的 _getFirstLine 函数。

系统设置

接下来我们来看下“系统设置”这部分界面效果，如图 5 所示。

图 5 系统设置的效果

看到图 5 的效果后，其实组件设计可能不是关键。这里涉及两个新的知识点：

• 在 Flutter 上怎么处理表单数据；

• 怎么保存系统设置的数据。

这里具体的组件树+布局就不绘制了，我们可以将实现过程分为四部分：第三方库引入、通用文件存储、model 应用和组件应用。

第三方库

这里我们需要使用到 Flutter 本地存储功能，Flutter 本地存储功能包含三种： shared_preferences、 path_provider 文件存储以及 sqflite。这里只介绍 path_provider 文件存储的实现，其他两个大家参照官网的介绍尝试即可。使用该 path_provider 库需要在 pubspec.yaml 中增加库引入，然后更新本地库。

通用文件存储

接下来我们基于 path_provider 实现一个通用的文件内容存储， 代码在 github 源码中 的 util/tools/local