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 的监听者们发出通知。

FM Weixin Body.gif

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];
    });
  }
}

FM Weixin Body.gif

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 仿生微信（目录）

上一篇: Flutter 仿生微信（1）：TabBar 创建

下一篇: Flutter 仿生微信（3）：发现页面搭建