本课时我会和大家一起来完善 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_storage.dart 中。这里我们主要需要实现两个方法，一个是文件储存内容，一个文件读取内容。
文件存储
我们先来看下文件存储的逻辑，如下代码：
复制代码
/// 将数据保存到文件中
static Future<void> save(String content, String filePath) async {
final directory = await getApplicationDocumentsDirectory();
File file = new File('${directory.path}/$filePath');
file.writeAsString(content);
}
因为是异步获取文件存储路径，因此 save 方法也需要作为异步逻辑，由于无须等待处理结果，因此返回 void。上面代码中使用了 path_provider 的 getApplicationDocumentsDirectory 的方法获取文件存储目录，使用 dart:io 获取具体文件的操作句柄，最后将内容写入文件，接下来我们看下读取的过程。
文件读取
读取的过程和写的代码相似，首先是找到文件并获取文件操作句柄，然后再使用文件句柄读取文件具体内容，代码如下：
复制代码
/// 获取文件数据内容
static Future<String> get(String filePath) async {
try {
final directory = await getApplicationDocumentsDirectory();
File file = new File('${directory.path}/$filePath');
bool exist = await file.exists();
if(!exist){ // 判断是否存在文件
return '';
}
return file.readAsString();
} catch(e) {
return '';
}
}
上面代码增加了一个异常处理，避免读取失败返回错误数据，因此如果这里判断异常，则返回空字符串。在 catch 逻辑中是需要增加上报来监控告警的，后续我们再来介绍这部分内容。
model 应用
因为系统配置是一个全局状态，需要在多个页面使用，所以我们需要将系统数据保存在 model 中，因此我们在 model 创建
system_config_model.dart 文件。在实现逻辑中，需要先调用 LocalStorage 来获取初始配置，代码如下：
复制代码
/// 构造函数
SystemConfigModel.init(){
LocalStorage.get('tyfapp.system.config').then((configStr){
Map<String, dynamic> configInfo = {};
if(configStr == null || configStr == '') { // 判断合法性
configInfo = {
"accessMessage" : true,
"tipsDetail" : true,
"soundReminder" : true,
"vibrationReminder" : true
};
} else {
try { // 尝试 json 解析，解析失败直接返回
configInfo =
json.decode(configStr) as Map<String, dynamic>;
} catch(e){
return;
}
}
systemConfig = StructSystemConfig.fromJson(configInfo);
});
}
上面代码 init 为构造函数，其中第 3 行是异步读取文件，获取到文件后存储在共享状态变量 systemConfig 中。为了异常考虑，如果没有获取到文件内容，则将共享状态变量默认设置打开状态，也就是 true 值。有了初始化部分，再修改 main.dart 增加一个新的状态共享，部分如下代码：
复制代码
// 初始化共享状态对象
LikeNumModel likeNumModel = LikeNumModel();
NewMessageModel newMessageNum = NewMessageModel(newMessageNum: 0);
// 异步数据处理
ApiUserInfoMessage.getUnReadMessageNum(newMessageNum);
// 异步获取系统配置
SystemConfigModel systemConfigModel = SystemConfigModel.init();
return MultiProvider(
providers: [
ChangeNotifierProvider(create: (context) => likeNumModel),
ChangeNotifierProvider(
create: (context) => UserInfoModel(myUserInfo: myUserInfo)),
ChangeNotifierProvider(create: (context) => newMessageNum),
ChangeNotifierProvider(create: (context) => systemConfigModel),
],
child: child,
);
上面代码的第 7 行就是增加了系统变量的初始化，第 15 行就是增加到状态共享中。接下来我们完善下 system_config_model.dart 代码，为其增加 get 和 save 方法，代码如下：
复制代码
/// 转化为StructSystemConfig结构
StructSystemConfig get() {
return systemConfig;
}
/// 转化为StructSystemConfig结构
bool getSwitchItem(String switchItem) {
if(systemConfig == null) {
return false;
}
Map<String,dynamic> systemConfigJson =
StructSystemConfig.toJson(systemConfig);
try{
return systemConfigJson[switchItem] as bool;
}catch(e){
return false;
}
}
代码的第 2 到第 18 行中的两个方法 get 和 getSwitchItem ，其作用都是获取系统配置，前者是获取所有配置，后者是获取具体的某个配置。我们继续看下配置保存的两个方法，代码如下。
复制代码
/// 保存单个数据
void saveOne(String key, bool value) {
Map<String,dynamic> systemConfigJson =
StructSystemConfig.toJson(systemConfig);
if(systemConfigJson[key] == value) {
return;
}
systemConfigJson[key] = value;
systemConfig = StructSystemConfig.fromJson(systemConfigJson);
print(systemConfigJson);
LocalStorage.save(json.encode(systemConfigJson), 'tyfapp.system.config');
notifyListeners();
}
/// 整体数据保存
void save(StructSystemConfig newSystemConfig) {
if(
systemConfig.accessMessage == newSystemConfig.accessMessage &&
systemConfig.tipsDetail == newSystemConfig.tipsDetail &&
systemConfig.soundReminder == newSystemConfig.soundReminder &&
systemConfig.vibrationReminder == newSystemConfig.vibrationReminder
) {
return;
}
systemConfig = newSystemConfig;
LocalStorage.save(
json.encode(StructSystemConfig.toJson(systemConfig)),
'tyfapp.system.config'
);
notifyListeners(
代码 save 和 saveOne，分别对应保存整个系统配置数据和保存单个系统配置数据。在两者实现逻辑中，首先都做了前期数据校验判断，避免不必要的 build 操作。在 save 代码逻辑中，需要将数据存储到本地，通过调用 LocaStorage.save 来实现。
组件应用
组件应用部分较为简单，我们先看下 pages/system_page/index.dart 的逻辑，如下：
复制代码
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:two_you_friend/model/system_config_model.dart';
import 'package:two_you_friend/widgets/system_page/switch_card.dart';
import 'package:two_you_friend/util/struct/system_config.dart';
/// 首页
class SystemConfigPageIndex extends StatelessWidget {
/// 构造函数
const SystemConfigPageIndex();
@override
Widget build(BuildContext context) {
final systemConfigModel = Provider.of<SystemConfigModel>(context);
StructSystemConfig systemConfig = systemConfigModel.get();
return Container(
padding: EdgeInsets.all(8),
child: Column(
children: <Widget>[
SystemPageSwitchCard(itemDesc: '新消息提醒', switchItem: 'accessMessage'),
SystemPageSwitchCard(itemDesc: '通知显示详情', switchItem: 'tipsDetail'),
SystemPageSwitchCard(itemDesc: '声音', switchItem: 'soundReminder'),
SystemPageSwitchCard(itemDesc: '振动', switchItem: 'vibrationReminder')
],
),
);
}
}
主要逻辑在 build 中，build 中使用了 widgets/system_page/switch_card.dart ，我们看下这个子组件的实现，代码如下：
复制代码
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:two_you_friend/model/system_config_model.dart';
import 'package:two_you_friend/styles/text_syles.dart';
/// 单个系统配置
///
/// [title]为帖子详情内容
class SystemPageSwitchCard extends StatelessWidget {
/// 传入的帖子标题
final String switchItem;
/// 消息提醒文字
final String itemDesc;
/// 构造函数
const SystemPageSwitchCard(
{Key key, this.itemDesc, this.switchItem}
) : super(key: key);
@override
Widget build(BuildContext context) {
// 获取操作句柄
final systemConfigModel = Provider.of<SystemConfigModel>(context);
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
itemDesc,
style: TextStyles.commonStyle(1, Colors.black),
),
Switch( // 选择
value: systemConfigModel.getSwitchItem(switchItem),
activeTrackColor: Colors.lightBlueAccent,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
onChanged: (newValue) { // 触发状态变化
systemConfigModel.saveOne(
switchItem,
!systemConfigModel.getSwitchItem(switchItem)
);
}
),
],
);
}
}
代码第 34 行使用了 Switch 这个组件，该组件的 value 是通过 systemConfigModel 状态共享类获取，在点击切换时触发状态改变，并调用 systemConfigModel 中的 saveOne 触发依赖组件状态变化。
以上就实现了系统设置的功能，相对其他组件的实现，这部分逻辑较为复杂，涉及了 Flutter 的本地存储 以及 Provider 的应用技术点。
搜索
最后我们来看下搜索功能，前面我们已经实现了一个基本的搜索功能，但是其中的接口部分没有补齐，我们先来看下实际的效果，如图 6 所示。
图 6 搜索提示和搜索结果效果
组件树+布局
根据图 6 的页面效果，我们来绘制组件树+布局，搜索提示就是一个列表，这里就不绘制了，搜索结果稍微复杂一些，主要看下这部分，绘制结果如图 7 所示。
图 7 搜索结果页面组件树+布局设计
这个组件树的设计，包含了我们布局设计思想中的 8 个过程，竖横、高宽、上下和左右，具体细节就不再赘述。接下来我们看下这两部分逻辑的实现：搜索提示和搜索结果。
搜索提示
搜索提示较为简单，主要逻辑是从服务端拉取搜索提示接口，并返回一个 ListView 列表结果。具体代码如下：
复制代码
/// 获取 suggest list组件列表
Future<Widget> _getSuggestList() async{
List<String> suggests = await ApiSearchIndex.suggest(query);
if(suggests == null || suggests.length < 1){ // 异常处理
return Container();
}
// 保留前 5 个搜索
int subLen = suggests.length > 5 ? 5 : suggests.length;
List<String> subSuggests = suggests.sublist(0, subLen);
return ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: subSuggests.length,
itemBuilder: (context,index){
return ListTile(
title: RichText(
text: TextSpan(
// 获取搜索框内输入的字符串，设置它的颜色并加粗
text: subSuggests[index],
style: TextStyles.commonStyle()
)
),
onTap: () {
query = subSuggests[index];
showResults(context);
},
);
}
);
}
代码中，首先使用 query 关键词获取用户输入，通过 ApiSearchIndex.suggest 方法获取服务端搜索提示结果，接下来做一些数据校验，最后根据搜索提示 build 出相应的组件。其中的第 26 行至第 28 行代码的作用是，通过点击搜索提示触发搜索行为，第 27 行替换搜索提示内容，第 28 行执行搜索并获取搜索结果。
搜索结果
根据图 7 的绘制结果，我们了解到这里需要设计两个组件，组件一是展示搜索到的用户列表内容，组件二是展示搜索到的帖子列表内容。我们这里就使用两个组件函数来实现，主要看下用户部分（帖子部分逻辑相似）。
复制代码
/// 获取用户搜索结果组件
Widget _getUserListWidget(List<StructUserInfo> userList) {
if(userList == null || userList.length < 1){
return Container();
}
int subLen = userList.length > 5 ? 5 : userList.length;
List<StructUserInfo> subUserList = userList.sublist(0, subLen);
return ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: subUserList.length + 1,
itemBuilder: (context,index) {
if(index == 0){
return Row(
children: <Widget>[
Padding(padding: EdgeInsets.only(left: 10)),
Text(
'用户',
style: TextStyles.commonStyle(0.9),
),
],
);
}
return UserPageCard(userInfo: subUserList[index - 1]);
});
}
以上组件代码的实现与我们之前所学习的知识点，没有太大的差异性。核心知识点是应用 ListView.builder 组件，来显示 seaction_name （也就是上面的 Text 组件）和搜索结果中的用户列表（上面的 UserPageCard 组件）。
以上就完成了搜索部分的逻辑，具体代码查看 github 中的 pages/search_page/custom_delegate.dart 文件。
总结
本课时带领大家实践开发了四个核心页面（我的好友、我的消息、系统设置和搜索）。学完本课时你需要进一步掌握组件树+布局的设计思想，同时掌握 Flutter 本地存储的技术点，进一步巩固 Flutter 编码风格。学完本课时之后，我建议你自行去实现“我的消息”中的私信功能和评论相关的部分（后续会在 github 上提供源码）。
本课时之前，我们对 App 的安全并没有关注太多，可以说完全放任。下一课时我们将通过工具化的方式来上报异常，保证我们 App 的质量，提前发现并解决问题。
转自:https://kaiwu.lagou.com/course/courseInfo.htm?courseId=251#/detail/pc?id=3535
网友评论