【Flutter】分離View與Model的方法

問題

我們在做Flutter開發的時候主要會在State中加入很多自己的業務邏輯，例如網絡請求，數據處理等等，如果你的業務邏輯比較復雜的話會面對着一個越來越膨脹的State。

代碼的可讀性下降，日后維護也越來越困難。這和我們在開發Android的時候遇到巨無霸Activity是同樣的問題。

解決辦法就是分層解耦。Android從MVC進化到MVP/MVVM。

Flutter 也有開發者把MVP引入到Flutter來解決這個問題。這里我們來看另一種比較簡單的方法。

方法

我們先來看一下官方的那個原始的Counter例子：

class _MyHomePageState extends State<MyHomePage> {

  int _counter = 0;
  
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), 
    );
  }
}

 

可以看到，在這個_MyHomePageState類中，視圖相關的代碼都在build()這個函數體內，數據屬性_counter以及相關的函數_incrementCounter()都存在於同一個類中。

可以想象一下，如果你的頁面比較復雜的話有可能會把部分視圖相關的代碼從build()中拆分出來放入類似getMyWidget()的函數，View與Model混合在一起，這個State將會變得難以維護。

為了將View與Model分離，我們采取mixin這種辦法。改造以后的代碼如下：

mixin _CounterStateMixin < T extends StatefulWidget> on State<T> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

}

class _CounterState extends State<CounterPage> with _CounterStateMixin {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Mixin, You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

 

首先新建一個mixin,這里命名為_CounterStateMixin，把原來State中的_counter和_incrementCounter()挪到這個新的mixin里。

mixin _CounterStateMixin < T extends StatefulWidget> on State<T> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

}

然后原來的State只需要混入這個mixin就好了。

class _CounterState extends State<CounterPage> with _CounterStateMixin

這里我們就把View和Model分開了，View相關的邏輯都在State中，而Model相關的邏輯則都在StateMixin里。