推薦一種簡單的在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分離的介紹，你們看完若是有什麼想法歡迎評論。