問題

我們在做Flutter開發(fā)的時候主要會在State中加入很多自己的業(yè)務(wù)邏輯，例如網(wǎng)絡(luò)請求，數(shù)據(jù)處理等等，如果你的業(yè)務(wù)邏輯比較復(fù)雜的話會面對著一個越來越膨脹的State。代碼的可讀性下降，日后維護(hù)也越來越困難。這和我們在開發(fā)Android的時候遇到巨無霸Activity是同樣的問題。解決辦法就是分層解耦。Android從MVC進(jìn)化到MVP/MVVM。Flutter 也有開發(fā)者把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類中，視圖相關(guān)的代碼都在build()這個函數(shù)體內(nèi)，數(shù)據(jù)屬性_counter以及相關(guān)的函數(shù)_incrementCounter()都存在于同一個類中。可以想象一下，如果你的頁面比較復(fù)雜的話有可能會把部分視圖相關(guān)的代碼從build()中拆分出來放入類似getMyWidget()的函數(shù)，View與Model混合在一起，這個State將會變得難以維護(hù)。

為了將View與Model分離，我們采取mixin這種辦法。對mixin還不太了解的同學(xué)可以找相關(guān)的文章看一下。改造以后的代碼如下：

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相關(guān)的邏輯都在State中，而Model相關(guān)的邏輯則都在StateMixin里。

是不是很簡單？如果用MVP或者其他方式來實(shí)現(xiàn)解耦的話很可能需要多創(chuàng)建幾個類，寫很多模板代碼，引入第三方庫，甚至需要IDE插件的幫助。

另外一個優(yōu)點(diǎn)就是副作用小，我們都知道使用mixin的話在運(yùn)行時可以認(rèn)為完全和原來那個State是一致的。如果使用MVP的話你可能需要自己處理State的生命周期，否則有可能會遇到內(nèi)存泄漏或者空指針等問題。

另外，這種方式也可以配合Provider等其他狀態(tài)管理機(jī)制運(yùn)行，可以說十分友好了。

完整代碼如下，大家感興趣可以試著跑一下試試：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CounterPage(title: 'Flutter Demo Home Page'),
    );
  }
}

class CounterPage extends StatefulWidget {
  CounterPage({Key key, this.title}) : super(key: key);

  final String title;

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

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 < T extends StatefulWidget> on State<T> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

}

還有一點(diǎn)就是這個拆出來的StateMixin是可以復(fù)用的，例如你想在頁面上放兩個功能相同但是顯示不一樣的counter，讓兩個counter的State都混入同一個CounterStateMixin就可以了:

class _CounterPageState extends State<CounterPage> with _CounterStateMixin 

class _NewCounterPage1State extends State<NewCounterPage> with _CounterStateMixin 

關(guān)于生命周期，由于這個mixin是對State的擴(kuò)展，所以與生命周期相關(guān)的函數(shù)如initState()，didUpdateWidget()，dispose()等都可以在mixin中覆寫，例如說網(wǎng)絡(luò)請求就可以放在StateMixin的initState()函數(shù)里。

總之，我們的目的是View與Model分離，所以要盡可能的把與視圖相關(guān)的邏輯放在State中，例如構(gòu)建Widget樹相關(guān)的邏輯，動畫相關(guān)的邏輯等。而與Model相關(guān)的邏輯則盡量放在StateMixin里，例如網(wǎng)絡(luò)請求等。

以上就是對使用mixin來實(shí)現(xiàn)Flutter中View與Model分離的介紹，大家看完如果有什么想法歡迎評論。