教你如何实现Flutter的BLoC框架

时间 2019-11-17

标签如何实现 flutter bloc 框架繁體版

原文原文链接

直奔主题android

最开始学习flutter的时候，咱们可能把ui层和业务逻辑层写在了一块儿，慢慢的dart文件愈来愈大，里面的逻辑也愈来愈复杂，而后咱们就会想到，是否是应该把代码重构一遍了？首先，代码是尽可能职责单一的才好，这样有问题也容易修改，不会牵一发而动全身，在开发android的时候，我用过mvp，用过mvvm，我的比较喜欢mvvm，要说这两个的区别，首先mvp模式是当你获取到数据之后，你须要本身控制如何刷新ui。而mvvm是把数据和ui绑定到了一块儿，当你的数据改变的时候，ui本身就会改变。而BLoC其实就是个MVVM框架，本文就是教你如何实现本身的MVVM框架。其实BLoC还有谷歌的Provide等等，核心都是同样的，都是经过查找上层节点来获取须要的数据。git

而后咱们来讲，如何在flutter中实现本身的MVVM框架来让ui层和业务逻辑层解耦，咱们先看一段没有使用MVVM设计模式的代码，全部代码已经上传到了github main.dartgithub

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter MVVM Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePageNoMVVM(),
    );
  }
}
复制代码

page_home_no_mvvm.dart设计模式

///没有使用MVVM设计模式的Widget
///author:liuhc
class HomePageNoMVVM extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePageNoMVVM> {
  bool _loading = true;
  String _text;

  @override
  void initState() {
    super.initState();
    loadData();
  }

  void loadData() {
    NetWork.query().then((String text) {
      setState(() {
        _loading = false;
        _text = text;
      });
    }).catchError((error) {
      setState(() {
        _loading = false;
        _text = error.toString();
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter没有使用MVVM的示例"),
      ),
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text("点击从新获取网络数据"),
              onPressed: () {
                loadData();
              },
            ),
            Offstage(
              offstage: !_loading,
              child: CircularProgressIndicator(),
            ),
            Expanded(
              child: SingleChildScrollView(
                child: Text("${_text ?? ""}"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
复制代码

能够看到，进入页面的时候，咱们须要请求数据，获取到数据之后，咱们再调用setState刷新页面，而后就显示出来了获取到的数据，这段代码功能是正常的，可是代码不是优雅的，由于ui层既须要控制如何显示ui，又须要和业务层打交道，从业务层获取数据后本身再更新ui，这明显违反了职责单一的原则，当这种逻辑愈来愈多，之后维护就愈来愈困难，而后咱们来看一下，如何本身实现MVVM框架来重构这段代码。bash

1. 首先咱们建立一个ViewModel的基类

abstract_base_viewmodel.dart网络

import 'package:flutter/widgets.dart';

///全部viewModel的父类，提供一些公共功能
///author:liuhc
abstract class BaseViewModel {

  bool _isFirst = true;

  bool get isFirst=>_isFirst;

  @mustCallSuper
  void init(BuildContext context) {
    if (_isFirst) {
      _isFirst = false;
      doInit(context);
    }
  }

  ///获取数据
  @protected
  Future refreshData(BuildContext context);

  @protected
  void doInit(BuildContext context);

  void dispose();
}
复制代码

这个类，我封装了基本全部viewModel都须要的一些方法，那个init方法的做用是为了保证doInit只执行一次，这样作省去了全部子类都判断一下是否已经执行过init，子类只须要重写doInit就能够保证方法里的代码只执行一次。app

2. 而后，咱们建立一个Widget，这个Widget里，有一个类属性为ViewModel的实例

viewmodel_provider.dart框架

import 'package:flutter/material.dart';
import 'package:flutter_mvvm/core/abstract_base_viewmodel.dart';

///提供viewModel的widget
///author:liuhc
class ViewModelProvider<T extends BaseViewModel> extends StatefulWidget {
  final T viewModel;
  final Widget child;

  ViewModelProvider({
    @required this.viewModel,
    @required this.child,
  });

  static T of<T extends BaseViewModel>(BuildContext context) {
    final type = _typeOf<ViewModelProvider<T>>();
    ViewModelProvider<T> provider = context.ancestorWidgetOfExactType(type);
    return provider.viewModel;
  }

  static Type _typeOf<T>() => T;

  @override
  _ViewModelProviderState createState() => _ViewModelProviderState();
}

class _ViewModelProviderState extends State<ViewModelProvider> {
  @override
  Widget build(BuildContext context) {
    return widget.child;
  }

  @override
  void dispose() {
    widget.viewModel.dispose();
    super.dispose();
  }
}
复制代码

3. 完成

是的就是这么简单，咱们建立了2个类，就完成了咱们的MVVM设计模式的框架less

4. 使用

下面咱们来看看，如何用这个mvvm的框架重构咱们刚才的代码mvvm

4.1 先编写咱们的ViewModel类，这里我使用了rxdart，主要是BehaviorSubject能够保存最后一次发送的数据，不过这里没有用到这个特性，你就把它当成StreamController就能够了

viewmodel_home.dart

import 'package:flutter/material.dart';
import 'package:flutter_mvvm/core/abstract_base_viewmodel.dart';
import 'package:flutter_mvvm/core/network.dart';
import 'package:rxdart/rxdart.dart';

///首页ViewModel类，用来和业务层交互
///author:liuhc
class HomeViewModel extends BaseViewModel {
  // ignore: close_sinks
  BehaviorSubject<String> _dataObservable = BehaviorSubject();

  Stream<String> get dataStream => _dataObservable.stream;

  @override
  void dispose() {
    _dataObservable.close();
  }

  @override
  void doInit(BuildContext context) {
    refreshData(context);
  }

  @override
  Future refreshData(BuildContext context) {
    //我的比较喜欢这样写，否则要写try catch来包裹代码，try catch不如这样写起来方便，不用一直定义变量
    return NetWork.query().then((String text) {
      _dataObservable.add(text);
    }).catchError((error) {
      _dataObservable.addError(error);
    });
  }
}
复制代码

4.2 而后咱们来重构首页Widget

page_home.dart

import 'package:flutter/material.dart';
import 'package:flutter_mvvm/core/viewmodel_provider.dart';
import 'package:flutter_mvvm/page/home/viewmodel_home.dart';

///使用MVVM设计模式的Widget
///author:liuhc
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  HomeViewModel _viewModel;

  @override
  void initState() {
    super.initState();
    _viewModel = ViewModelProvider.of(context);
    _viewModel.init(context);
  }

  @override
  void dispose() {
    _viewModel.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter使用MVVM的示例"),
      ),
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text("点击从新获取网络数据"),
              onPressed: () {
                _viewModel.refreshData(context);
              },
            ),
            Expanded(
              child: SingleChildScrollView(
                child: StreamBuilder(
                  stream: _viewModel.dataStream,
                  builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
                    if (snapshot.connectionState == ConnectionState.waiting) {
                      return Center(
                        child: CircularProgressIndicator(),
                      );
                    }
                    return Text(
                      "${snapshot.hasError ? snapshot.error : snapshot.data}",
                    );
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
复制代码

上面代码的关键部分是经过ViewModelProvider.of(context);获取到了上层Widget里的viewModel类实例，这部分的知识不是本文的终点，不懂的请本身查询一下相关知识。

4.3 而后咱们修改程序入口，看一下如何把`首页Widget`和`首页ViewModel`绑定到一块儿的

main.dart

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter MVVM Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ViewModelProvider(
        viewModel: HomeViewModel(),
        child: HomePage(),
      ),
    );
  }
}
复制代码

在上面的代码里，咱们的home没有直接传递HomePage()，而是传递的ViewModelProvider，ViewModelProvider的代码能够在上面发过了，在ViewModelProvider这个类里，咱们保存了viewModel的实例，在ViewModelProvider的build方法里，咱们直接返回了传入的child，咱们还定义了一个方法static T of<T extends BaseViewModel>(BuildContext context)，在这个方法里经过调用context.ancestorWidgetOfExactType找到了该类里的viewModel类属性，因此在_HomePageState类里咱们找到了传入ViewModelProvider的viewModel，而后能够用该viewModel来进行下一步操做。

文章到此讲解结束，在使用该种方式开发的过程当中，还能完美解决TabView隔tab点击报错的问题(用过的都知道我在说什么)，由于即便使用了AutomaticKeepAliveClientMixin，挨个点击tab的话没问题，可是隔着点的话仍是有问题，我也找过不少方法，都很差用，可是该种方式能够解决该问题，由于是用StreamBuilder刷新的数据，而ViewModel保存在了上层widget，因此本widget重绘的时候上层widget的viewModel的实例并不会发生变化，数据还在Stream里，因此即便从新执行了build方法，也不会再次联网请求数据，只有咱们手动给StreamController add数据的时候，才会将新数据给本widget来进行重绘。