1. 源码下载
喜欢的话，别忘了点个关注，还有给个 Github 右上角的小星星吧。
源码下载地址，代码会根据不断更新。
Flutter 仿生微信（目录）
上一篇: Flutter 仿生微信（1）：TabBar 创建
下一篇: Flutter 仿生微信（3）：发现页面搭建
2. 思路
这里我遇到了一点困难，查了不少资料，但是收获甚微，有大牛有解决方案的可以私信我。
2.1 思路 1
上一篇中我们除了 TabBar，使用 Provider，将 FMHomeManager 作为 ChangeNotify 来整合数据。最初的思路是同样的将 FMHomeManager 传递给另一个 Provider 来处理 Body 的内容。但是遇到了一些报错，这里就不细说了，查了很多资料，然后放弃了。
大致思路如下，我们先注册两个不同的 Provider。
Provider1 -> FMHomeManager -> TabBar，并在 TabBar 中监听 FMHomeManger 的通知
Provider2 -> FMHomeManager -> Body，并在 Body 中监听 FMHomeManger 的通知
然后我们改变 FMHomeManager 的属性后，同时对 TabBar，Body 发出通知。但是由于 ChangeNotify 的 Reuse 问题，这个方案被搁置了。
2.2 思路 2
于是我这里准备将 FMHomeManger 单独拿出来，做一个中间层，收到的数据改变经过 FMHomeManager 统一转发。同时在 FMHomeManager 中新增 FMPagesManager 和 FMTabBarManager 两个 ChangeNotify。
于是这里将 FMHomeManger 创建为单例，然后通过单例类管理最终要发出去的通知。
TabBar (ValueChanged) -> FMHomeManger -> 对 FMPagesManger 同步数据 -> 同时对 FMPagesManager 和 FMTabBarManager 的监听者们发出通知。
3. 示例代码
FMHomeManager.dart
import 'package:FMWeixinApp/chat/FMChat.dart';
import 'package:FMWeixinApp/find/FMFind.dart';
import 'package:FMWeixinApp/maillist/FMMailList.dart';
import 'package:FMWeixinApp/mine/FMMine.dart';
import 'package:flutter/material.dart';
class FMHomeManager {
// 单例模式
static FMHomeManager _instance;
static FMHomeManager get instance => _getInstance();
factory FMHomeManager()=> _getInstance();
FMHomeManager._init() {}
static FMHomeManager _getInstance(){
if(_instance == null) {
print("init");
_instance = new FMHomeManager._init();
}
return _instance;
}
// 下标
var _selectedIndex = 0;
// 下标 get, set
int get selectedIndex => _selectedIndex;
set selectedIndex(int index){
_selectedIndex = index;
}
// PageManager
FMPagesManager _pagesManager = FMPagesManager();
FMPagesManager get pagesManager => _pagesManager;
// TabBarManager
FMTabBarManager _tabBarManager = FMTabBarManager(
(index){
FMHomeManager.instance.selectedIndex = index;
FMHomeManager.instance.notifyAll();
}
);
FMTabBarManager get tabBarManager => _tabBarManager;
// 发送通知
void notifyAll(){
_pagesManager.selectedPage = _selectedIndex;
_pagesManager.notifyListeners();
_tabBarManager.notifyListeners();
}
}
class FMPagesManager with ChangeNotifier {
// FMHomeManager
// 下标
int _selectedPage = 0;
// Pages
List <Widget> _pages = [];
// 构造方法
FMPagesManager(){
_initialPages();
}
// 下标
int get selectedPage => _selectedPage;
set selectedPage(int indext){
_selectedPage = indext;
}
// Pages
List <Widget> _initialPages(){
_pages.add(FMChat());
_pages.add(FMMailList());
_pages.add(FMFind());
_pages.add(FMMine());
return _pages;
}
List <Widget> get pages => _pages;
}
class FMTabBarManager with ChangeNotifier {
ValueChanged<int> _valueChanged;
FMTabBarManager(this._valueChanged);
// 下标
int _selectedIndex = 0;
// 下标 get, set
int get selectedIndex => _selectedIndex;
set selectedIndex(int index){
_selectedIndex = index;
this._valueChanged(index);
}
}
FMHome.dart
import 'package:FMWeixinApp/home/FMHomeManager.dart';
import 'package:FMWeixinApp/home/pages/FMPages.dart';
import 'package:FMWeixinApp/home/tabbar/FMTabBar.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
class FMHome extends StatefulWidget {
@override
FMHomeState createState()=> FMHomeState();
}
class FMHomeState extends State <FMHome> {
FMHomeManager manager = FMHomeManager();
@override
Widget build(BuildContext context) {
// TODO: implement build
return _scaffold();
}
Scaffold _scaffold(){
return Scaffold(
// TabBar
bottomNavigationBar: ChangeNotifierProvider(
create: (context)=> manager.tabBarManager,
child: FMTabBar(),
),
body: ChangeNotifierProvider(
create: (context) => manager.pagesManager,
child: FMPages(),
),
);
}
}
FMPages.dart
import 'package:FMWeixinApp/home/FMHome.dart';
import 'package:FMWeixinApp/home/FMHomeManager.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
class FMPages extends StatefulWidget {
@override
FMPagesState createState()=> FMPagesState();
}
class FMPagesState extends State <FMPages> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Consumer<FMPagesManager>(builder: (context, manager, child){
return manager.pages[manager.selectedPage];
});
}
}
4. 源码分析
4.1 分页设计
我们的页面为 TabBar 对应多个不同页面，所以这里我们需要针对 TabBar 进行分页。我们创建了 FMPagesManager 作为页面管理者，同时创建了4个不同页面，FMChat(), FMMailList(), FMFind(), FMMine()，并在 FMPagesManager.pages 中按照顺序进行保存。同时我们还创建了 FMPagesManager.selectedPage 作为当前显示页面。
页面保存好后，我们创建了 FMPages.dart 文件，将 FMPages() 作为 body 提供给 home.scaffold.body。
在 FMPages.dart 文件中，我们按照 FMPagesManager.selectedPage 读取 pages 中已经保存好的页面作为最上层显示。
4.2 消息分发
最开始接收到点击信息的是 FMTabBar，在代码中，我把这个点击事件返回给上层 FMHomeManger，然后更改 FMHomePages.selectedPage 后，同时刷新 TabBar 和 Body。
