推荐一种简单的在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还不太了解的同窗能够找相关的文章看一下。改造之后的代码以下：

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

是否是很简单？若是用MVP或者其余方式来实现解耦的话极可能须要多建立几个类，写不少模板代码，引入第三方库，甚至须要IDE插件的帮助。

另一个优势就是反作用小，咱们都知道使用mixin的话在运行时能够认为彻底和原来那个State是一致的。若是使用MVP的话你可能须要本身处理State的生命周期，不然有可能会遇到内存泄漏或者空指针等问题。

另外，这种方式也能够配合Provider等其余状态管理机制运行，能够说十分友好了。

完整代码以下，你们感兴趣能够试着跑一下试试：

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++;
    });
  }

}

复制代码

还有一点就是这个拆出来的StateMixin是能够复用的，例如你想在页面上放两个功能相同可是显示不同的counter，让两个counter的State都混入同一个CounterStateMixin就能够了:

class _CounterPageState extends State<CounterPage> with _CounterStateMixin class _NewCounterPage1State extends State<NewCounterPage> with _CounterStateMixin 复制代码

关于生命周期，因为这个mixin是对State的扩展，因此与生命周期相关的函数如initState()，didUpdateWidget()，dispose()等均可以在mixin中覆写，例如说网络请求就能够放在StateMixin的initState()函数里。

总之，咱们的目的是View与Model分离，因此要尽量的把与视图相关的逻辑放在State中，例如构建Widget树相关的逻辑，动画相关的逻辑等。而与Model相关的逻辑则尽可能放在StateMixin里，例如网络请求等。

以上就是对使用mixin来实现Flutter中View与Model分离的介绍，你们看完若是有什么想法欢迎评论。