Flutter 仿生微信（2）：Pages 创建

# 1. 源码下载 喜欢的话，别忘了点个关注，还有给个 Github 右上角的[小星星](https://github.com/Maojunhao/FMWeixinApp.git)吧。 [源码下载地址](https://github.com/Maojunhao/FMWeixinApp.git)，代码会根据不断更新。 ##### [Flutter 仿生微信（目录）](https://www.jianshu.com/p/0de3476d6721) ##### [上一篇: Flutter 仿生微信（1）：TabBar 创建](https://www.jianshu.com/p/1366f5505490) ##### [下一篇: Flutter 仿生微信（3）：发现页面搭建](https://www.jianshu.com/p/e1235f500215) # 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 _pages = []; // 构造方法 FMPagesManager(){ _initialPages(); } // 下标 int get selectedPage => _selectedPage; set selectedPage(int indext){ _selectedPage = indext; } // Pages List _initialPages(){ _pages.add(FMChat()); _pages.add(FMMailList()); _pages.add(FMFind()); _pages.add(FMMine()); return _pages; } List get pages => _pages; } class FMTabBarManager with ChangeNotifier { ValueChanged _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 { 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 { @override Widget build(BuildContext context) { // TODO: implement build return Consumer (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。 ##### [Flutter 仿生微信（目录）](https://www.jianshu.com/p/0de3476d6721) ##### [上一篇: Flutter 仿生微信（1）：TabBar 创建](https://www.jianshu.com/p/1366f5505490) ##### [下一篇: Flutter 仿生微信（3）：发现页面搭建](https://www.jianshu.com/p/e1235f500215)