【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里。