Mobx在Flutter中的使用教程

時間 2019-11-24

標籤 mobx flutter 使用教程简体版

原文原文鏈接

若是在開發中遇到什麼問題，歡迎加入 flutter興趣交流羣 QQ羣：541020533git

前言

Flutter 用的是 Dart 語言，而 Dart 不少地方借鑑了 React ，好比說每次頁面刷新用的是和 React 相似的setState寫法，這樣雖然便於頁面數據的更新，但也帶來了 React 中一直存在的 state沒法跨頁面更新的問題。github

React 提供了 Redux ， Mobx 等框架來管理頁面狀態和 App 全局狀態，而閒魚也提供了基於 Redux 的 Fish Redux 用來管理數據的組裝式 Flutter 應用框架。數組

本文主要講的mobx.dart是 Mobx 官方推出的，基於 Dart 語言，用來處理 Dart 和 Flutter 狀態的框架。思路和 Mobx 在 JS 中的用法差很少。做者在開發 React-Native 時用的最多的就是 Mobx，最近正好在使用 Flutter 重寫開源項目識兔，因此本文就應運而生。bash

需求

本文主旨使用，而使用最好的辦法就是實現一個功能。app

本文實現一個很簡單的關於跨頁面傳值的功能。框架

建立三個tab，在第一個tab，作一個模糊的背景圖，在第三個tab，點擊按鈕，將第一個tab的背景圖換掉。 ide

準備工做

dependencies:
  mobx: 0.3.8+1 
  flutter_mobx: 0.3.3+1
  
  mobx_codegen: 0.3.9+1 // MobX代碼生成庫，用來生成 .g.dart的庫
  
  provider: 3.1.0+1  // 全局狀態管理
複製代碼

建立Store

爲何建立Store呢？由於咱們要作的是跨頁面修改狀態，在 Redux 中稱爲 Store，這裏直接借鑑過來。post

App能夠有多個 Store，但不推薦每一個頁面都是 Store，推薦只有那種須要跨頁面修改狀態的頁面命名爲 xxxStore，其餘均可以成爲 xxxMobx。ui

shitu_store.darturl

import 'package:mobx/mobx.dart'; // 引入

part 'shitu_store.g.dart'; // 稍後會用命令行生成這個文件，但這裏必需要這麼寫

class ShiTuStore = _ShiTuStore with _$ShiTuStore; // 固定寫法

abstract class _ShiTuStore with Store {

  // 默認圖片地址
  @observable
  String imageUrl =
      'http://ww1.sinaimg.cn/large/0065oQSqly1g2pquqlp0nj30n00yiq8u.jpg';

  // 外部調用，用來修改默認圖片的方法
  @action
  setImageUrl(String url) {
    imageUrl = url;
  }
}
複製代碼

執行命令行

flutter packages pub run build_runner build
複製代碼

上面寫到了要添加part 'shitu_store.g.dart'; 這裏經過這個命令行自動生成該文件。經過上面這行命令，會讓 Dart 添加對 @observable，@computed， @action的支持，讓 Mobx 的使用變得簡單。

這部分代碼，由於是自動生成的，這裏就不貼出來了。須要的能夠看開源項目 flutter_shitu

綁定至Provider

這步主要作的是對入口文件main.dart的修改，須要引入provider和shitu_store;

@override
  Widget build(BuildContext context) => MultiProvider(
    providers: [            // 數組，能夠注入多個Store
      Provider<ShiTuStore>( // 須要更新的Store
            builder: (_) => ShiTuStore(),
        ),
    ],
    child: MaterialApp(
        theme: ThemeData(backgroundColor: Colors.white),
        home: Scaffold(
            resizeToAvoidBottomPadding: false,
            body: Launch(),
        ),
    ),
);
複製代碼

業務代碼

前期準備工做都完成了，接下來就是修改頁面效果了。這裏先把最重要的代碼貼出來，最重要，最重要，最重要！

ShiTuStore store = Provider.of<ShiTuStore>(context);
複製代碼

看到上面的代碼，有沒有什麼想法？經過上面的代碼，就能夠在頁面中拿到 Store 中的數據了！

這裏貼出部分代碼，所有代碼能夠在項目中查看flutter_shitu。

shitu.dart

body: Stack(
    alignment: Alignment.centerLeft,
    children: <Widget>[
        Image.network(
            store.imageUrl, // 經過store獲得要展現的圖片
            fit: BoxFit.fitHeight,
            height: height,
        ),
        BackdropFilter(
            filter: ImageFilter.blur(
                sigmaX: 5,
                sigmaY: 5,
            ),
            child: Container(
                color: Colors.white.withOpacity(0.1),
            ),
        ),
    ],
)
複製代碼

能夠發現我這裏用了 Stack 組件，但爲何用這個？有興趣的小夥伴能夠看我另外一個系列的文章從0到1使用Flutter重構識兔（1）

mine.dart

@override
  Widget build(BuildContext context) {
    final store = Provider.of<ShiTuStore>(context);
    
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(title: Text('個人')),
          body: Container(
            alignment: Alignment.center,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                RaisedButton(
                  child: Text('點擊更改'),
                  onPressed: () {
                  
                    // 點擊時，調用store中的方法切換首頁圖片
                    
                    store.setImageUrl(
                        'https://ws1.sinaimg.cn/large/0065oQSqly1g0ajj4h6ndj30sg11xdmj.jpg');
                  },
                )
              ],
            ),
          ),
        ),
    );
  }
複製代碼