Flutter 狀態管理- 使用 MobX

時間 2021-04-24

標籤 shell app less ide 工具 this 翻譯 code 視頻欄目 Unix 简体版

原文原文鏈接

文 / Paul Halliday, developer.school 創始人shell

衆所周知，狀態管理是每一個軟件項目都須要持續迭代更新的方向。它並非一個「一次性」的工做，
而須要不斷確保你遵循的最佳實踐可以讓你的工程保持良好的可維護性。app

要在 Flutter 中高效地使用 MobX ，須要遵循如下原則：less

咱們能訪問任意狀態中的可觀察對象（即在咱們應用運行過程當中發生變化的變量）。
咱們能夠在 View 中展現這些狀態，並響應 Action 意圖。
咱們能夠修改狀態，從而更新可觀察對象以及相應的 View。

那麼它的優點在哪呢？答案是，經過 MobX 完成這一切將會變得超級簡單！codegen 工具能夠幫咱們完成絕大部分模版化的工做。ide

初始化項目

讓咱們從建立一個全新的 Flutter 工程開始吧：工具

# New Flutter project
$ flutter create f_mobx && cd f_mobx
 
# Open in VS Code
$ code .

下一步，咱們得在 pubspec.yaml 中拉取一些依賴 (dependencies 與 dev_dependencies):ui

dependencies: 
 flutter:
    sdk: flutter
 
  mobx:
  flutter_mobx:
 
dev_dependencies:
  flutter_test:
    sdk: flutter
 
  build_runner: ^1.3.1
  mobx_codegen:

以後咱們能夠在 main.dart 中建立一個全新的 MaterialApp 以放置咱們的 CounterPage。this

import 'package:f_mobx/pages/counter_page.dart';
import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: CounterPage(),
    );
  }
}

下一步，咱們須要在 lib/pages/counter_page.dart 中建立 CounterPage，並完成用戶界面的構建。其中包括了一個增長按鈕和一個減小按鈕。翻譯

import 'package:flutter/material.dart';
 
class CounterPage extends StatelessWidget {
 
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: AppBar(
          title: Text('Flutter and MobX'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Counter',
                style: TextStyle(fontSize: 30.0),
              ),
              Text(
                '0', 
                style: TextStyle(fontSize: 42.0),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  FlatButton.icon(
                    icon: Icon(Icons.add),
                    label: Text('Add'),
                    onPressed: () {},
                  ),
                  FlatButton.icon(
                    icon: Icon(Icons.remove),
                    label: Text('Remove'),
                    onPressed: () {},
                    ),
                  ),
                ],
              )
            ],
          ),
        ));
  }
}

建立計數器的狀態

太棒了！咱們如今已經在 lib/store/counter/counter.dart 建立好了咱們的計數器。如今，讓咱們來看看代碼，逐行進行解釋:code

import 'package:mobx/mobx.dart';
 
// This is our generated file (we'll see this soon!)
part 'counter.g.dart';
 
// We expose this to be used throughout our project
class Counter = _Counter with _$Counter;
 
// Our store class
abstract class _Counter with Store {
  @observable
  int value = 1;
 
  @action
  void increment() {
    value++;
  }
 
  @action
  void decrement() {
    value--;
  }
}

咱們導入了 mobx.dart，這樣就能夠訪問 Store 以及其餘功能了。
接下來，咱們使用了 part 語法組合此類的自動生成的部分。咱們暫時還沒使用到生成器，可是別擔憂，咱們將會在下一個部分進行這個操做。
接下來，咱們將暴露 Counter 類，該類將與生成的與 MobX 綁定的 _$Counter 類一塊兒使用。
最後，咱們使用 Store 類建立一個 _Counter，並定一個 @observable 屬性和 @actions 以肯定 Store 能夠與之交互的區域。

MobX 已經幫咱們作了絕大部分繁瑣的事情，因此咱們不須要關心底層是如何實現的。視頻

如今咱們已經有了 Counter 類，讓咱們在終端的該工程目錄下經過下面的命令運行 build_runner 和 mobx_codegen：

$ flutter packages pub run build_runner watch

咱們如今應該能夠看到生成的 counter.g.dart 文件。它看上去相似下面這樣：

part of 'counter.dart';
mixin _$Counter on _Counter, Store {
  final _$valueAtom = Atom(name: '_Counter.value');
 
  @override
  int get value {
    _$valueAtom.reportObserved();
    return super.value;
  }
 
  @override
  set value(int value) {
    _$valueAtom.context.checkIfStateModificationsAreAllowed(_$valueAtom);
    super.value = value;
    _$valueAtom.reportChanged();
  }
 
  final _$_CounterActionController = ActionController(name: '_Counter');
 
  @override
  void increment() {
    final _$actionInfo = _$_CounterActionController.startAction();
    try {
      return super.increment();
    } finally {
      _$_CounterActionController.endAction(_$actionInfo);
    }
  }
 
  @override
  void decrement() {
    final _$actionInfo = _$_CounterActionController.startAction();
    try {
      return super.decrement();
    } finally {
      _$_CounterActionController.endAction(_$actionInfo);
    }
  }
}

這些東西，咱們都不須要本身來實現！是否是很棒呀？

與 Store 進行綁定

接下來，咱們須要讓 counter_page.dart 綁定到 Counter store。讓咱們再次看看它長什麼樣，而後進行深刻探索：

import 'package:flut_mobx/store/counter/counter.dart';
import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
 
class CounterPage extends StatelessWidget {
  final Counter counter = Counter();
 
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: AppBar(
          title: Text('Flutter and MobX'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Counter',
                style: TextStyle(fontSize: 30.0),
              ),
              Observer(
                builder: (_) =>
                    Text('${counter.value}', style: TextStyle(fontSize: 42.0)),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  FlatButton.icon(
                    icon: Icon(Icons.add),
                    label: Text('Add'),
                    onPressed: counter.increment,
                  ),
                  FlatButton.icon(
                    icon: Icon(Icons.remove),
                    label: Text('Remove'),
                    onPressed: counter.decrement,
                  ),
                ],
              )
            ],
          ),
        ));
  }
}

讓咱們深刻研究一下：

咱們導入了 flutter_mobx 以及咱們的 Counter store，因此以後咱們能夠用到他們。
接下來，咱們初始化了 Counter，並將其命名爲 counter，以後咱們就能夠輕鬆監聽這個可觀察對象的值，或是發出 actions：final Counter counter = Counter();
咱們使用 Observer 監聽 counter.value 的值。
咱們將 onPressed 事件綁定到 counter.increment 和 counter.decrement，它們會將 action 發送到 Store。