教你如何實現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來進行重繪。