Flutter+Mobx實(shí)戰(zhàn)，寫一個(gè)App應(yīng)用

wyk1184 發(fā)布于2019-05-23 17:28 / 3513人閱讀

摘要：在這里可以處理一些傳過(guò)來(lái)的參數(shù)，然后我們將參數(shù)放入類中實(shí)例化。因?yàn)殡m然是一個(gè)，但是實(shí)例化的時(shí)候是兩個(gè)不同的，所以第一個(gè)頁(yè)面的數(shù)據(jù)變化了也不會(huì)影響到這里。

說(shuō)明

目前增加了路由跳轉(zhuǎn)，可以帶參數(shù)跳轉(zhuǎn)頁(yè)面。下拉可以自定義刷新樣式，IOS點(diǎn)擊Status Bar回到頂部，目前已經(jīng)測(cè)試過(guò)。狀態(tài)管理器使用Mobx,我自己覺(jué)得對(duì)于Redux使用起來(lái)會(huì)復(fù)雜一點(diǎn)，下面是提供的預(yù)覽GIF圖,卡頓現(xiàn)象是因?yàn)槠聊讳浿频膸视悬c(diǎn)低。

項(xiàng)目地址：github.com/Tecode/flut…,不定時(shí)的更新，歡迎start。

安卓預(yù)覽

IOS預(yù)覽

依賴庫(kù)

environment:
  sdk: ">=2.1.0 <3.0.0"
dependencies:
  flutter:
    sdk: flutter
  mobx:
  flutter_mobx: // Mobx
  cupertino_icons: ^0.1.2
  flutter_svg: ">=0.12.4" // 處理SVG圖片
  carousel_slider: ^1.3.0 // 輪播圖
  fluro: "^1.4.0" // 路由
  provider: ^2.0.1 // 用于包裹mobx

dev_dependencies:
  flutter_test:
    sdk: flutter
  build_runner: ^1.3.1 //Mobx依賴
  mobx_codegen: // Mobx依賴

Flutter版本

Flutter 1.5.9-pre.223 ? channel master ? https://github.com/flutter/flutter.git
Framework ? revision b76a1e8312 (25 hours ago) ? 2019-05-13 09:06:30 +0100
Engine ? revision 816d3fc586
Tools ? Dart 2.3.1 (build 2.3.1-dev.0.0 a0290f823c)

修改系統(tǒng)狀態(tài)欄顏色

import "package:flutter/material.dart";
import "package:flutter/cupertino.dart";
import "package:flutter_book/containers/Entrance.dart";
import "package:flutter_book/helpers/constants.dart" show AppColors;
import "package:flutter/services.dart";

void main() {
  // 修改系統(tǒng)狀態(tài)欄顏色
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Color(AppColors.themeColor), // navigation bar color
    statusBarColor: Color(AppColors.themeColor), // status bar color
  ));
  runApp(MyApp());wenti
}

自定義appBar左側(cè)導(dǎo)航顯示的內(nèi)容

appBar: AppBar(
...
        leading: IconButton(
          alignment: Alignment.centerRight,
          icon: SvgPicture.asset(
            "assets/icon/icon_trophy.svg",
            width: Constants.appBarIconSize + 5.0,
            height: Constants.appBarIconSize + 5.0,
          ),
          onPressed: () {
            print("ok");
          },
        )
...
)

媒體查詢

MediaQuery.of(context)

資源配置

  assets:
   - assets/icon/
   - lib/containers/
   - lib/model/
   - lib/helpers/
   - lib/routers/
   - assets/images/

路由配置

這里我使用的是fluro配置路由，這里我偷一下懶了，就沒(méi)有使用原生的方法，不過(guò)他幫我們封裝了好多的方法我們可以很方便的去使用它，下面說(shuō)一下路由的配置。

lib outers outers.dart

配置路由對(duì)應(yīng)的模塊，可以理解成Vue-router或React-router一樣，先要將對(duì)應(yīng)的路由配置到你要跳轉(zhuǎn)的模塊去。

import "package:fluro/fluro.dart";
import "package:flutter/material.dart";
import "package:flutter_book/routers/route_handlers.dart";

class Routes {
  static String root = "/";
  static String setting = "/setting";
  static String detail = "/detail";
  static String demoSimpleFixedTrans = "/demo/fixedtrans";
  static String demoFunc = "/demo/func";
  static String deepLink = "/message";

  static void configureRoutes(Router router) {
    router.notFoundHandler = Handler(
        handlerFunc: (BuildContext context, Map<String, List<String>> params) {
      print("ROUTE WAS NOT FOUND !!!");
    });
    router.define(root, handler: rootHandler);
    router.define(setting, handler: settingRouteHandler);
    router.define(detail, handler: detailRouterHandler);
  }
}

lib outers oute_handlers.dart

在這里可以處理一些傳過(guò)來(lái)的參數(shù)，然后我們將參數(shù)放入類中實(shí)例化。

import "package:flutter_book/containers/Setting.dart";
import "package:flutter_book/containers/FirstScreen.dart";
import "package:flutter_book/containers/Detail.dart";
import "package:fluro/fluro.dart";
import "package:flutter/material.dart";
import "package:flutter_book/helpers/fluro_convert_util.dart";

Handler rootHandler = Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
  return FirstScreen();
});

Handler settingRouteHandler = Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
    return Setting();
});

Handler detailRouterHandler = Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
  return Detail(
      title: FluroConvertUtils.fluroCnParamsDecode(params["title"]");

libmain.dart

將路由與Flutter綁定，這樣你的路由就可以生效了

class MyApp extends StatelessWidget {
  MyApp() {
    final router = new Router();
    Routes.configureRoutes(router);
    Application.router = router;
  }
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Book",
      theme: ThemeData(
          primaryColor: Color(AppColors.themeColor),
          accentColor: Color(AppColors.themeColor),
          scaffoldBackgroundColor: Color(AppColors.themeColor)),
      home: Entrance(),
      onGenerateRoute: Application.router.generator,
    );
  }
}

使用

import "package:fluro/fluro.dart";
import "package:flutter_book/routers/application.dart";
import "package:flutter_book/helpers/fluro_convert_util.dart";

...代碼省略了

 Application.router.navigateTo(
    context,
    "/detail");${FluroConvertUtils.fluroCnParamsEncode("熱門圖書(shū)")}",
    transition: TransitionType.native
);

路由傳參 路由不支持中文字符需要編碼再解碼

import "dart:convert";

/// fluro 參數(shù)編碼解碼工具類
class FluroConvertUtils {
  /// fluro 傳遞中文參數(shù)前，先轉(zhuǎn)換，fluro 不支持中文傳遞
  static String fluroCnParamsEncode(String originalCn) {
    StringBuffer sb = StringBuffer();
    var encoded = Utf8Encoder().convert(originalCn);
    encoded.forEach((val) => sb.write("$val,"));
    return sb.toString().substring(0, sb.length - 1).toString();
  }

  /// fluro 傳遞后取出參數(shù)，解析
  static String fluroCnParamsDecode(String encodedCn) {
    var decoded = encodedCn.split("[").last.split("]").first.split(",");
    var list = <int>[];
    decoded.forEach((s) => list.add(int.parse(s.trim())));
    return Utf8Decoder().convert(list);
  }
}

編碼

import "package:flutter_book/helpers/fluro_convert_util.dart";

Application.router.navigateTo(
    context,
    "/detail");${FluroConvertUtils.fluroCnParamsEncode("熱門圖書(shū)")}",
    transition: TransitionType.native,
    // transitionDuration: const Duration(milliseconds: 300),
);

解碼

import "package:flutter_book/helpers/fluro_convert_util.dart";

Handler detailRouterHandler = Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
  return Detail(
      title: FluroConvertUtils.fluroCnParamsDecode(params["title"]");

使用Mobx狀態(tài)管理器 pubspec.yaml配置

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  mobx:
  flutter_mobx:


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  flutter_svg: ">=0.12.4"
  carousel_slider: ^1.3.0
  fluro: "^1.4.0"
  provider: ^2.0.1

dev_dependencies:
  flutter_test:
    sdk: flutter
  build_runner: ^1.3.1
  mobx_codegen:

多個(gè)頁(yè)面使用一個(gè)store

這里要使用到provider: ^2.0.1，類似React的Provider。使用Provider來(lái)包裹我們的組件，使Mobx和我們的React聯(lián)系起來(lái)。

React Provider

Dart Provider

Dart Provider也是一樣的道理，將Mobx和Flutter聯(lián)系起來(lái)，lib/main.dart完整代碼，這樣使用可以保證你實(shí)例化的的store是同一個(gè)類。

  runApp(MultiProvider(
    providers: [
      Provider(
        builder: (_) => FindStore(),
      )
    ],
    child: MyApp(),
  ));

如何使用

我的導(dǎo)航發(fā)現(xiàn)那一欄和下面的內(nèi)容是分開(kāi)的，當(dāng)我點(diǎn)擊導(dǎo)航的切換按鈕就會(huì)改變顯示的頁(yè)面，這樣我們可以復(fù)用顯示層的UI組件，數(shù)據(jù)放專門的文件去管理。

來(lái)看看如何實(shí)現(xiàn)的

通過(guò)點(diǎn)擊然后改變數(shù)據(jù)findStore.setTile("tile", true);

導(dǎo)航lib/widgets/NavBar/FindNavBar.dart

import "package:flutter/material.dart";
import "package:flutter_svg/svg.dart";
import "package:flutter_mobx/flutter_mobx.dart";
import "package:flutter_book/helpers/constants.dart";
import "package:flutter_book/stores/findStore.dart";
import "package:provider/provider.dart";

class FindNavBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  // 我們的store
    final findStore = Provider.of(context);

    return Observer(
      builder: (_) => AppBar(
            title: Text("發(fā)現(xiàn)"),
            actions: [
              IconButton(
                alignment: Alignment.centerRight,
                onPressed: () {
                  findStore.setTile("tile", true);
                  findStore.counter();
                },
                icon: SvgPicture.asset(
                  "assets/icon/icon_more.svg",
                  width: Constants.appBarIconSize + 2.0,
                  height: Constants.appBarIconSize + 2.0,
                  color: Color(findStore.tile
                      ");"tile", false);
                },
                icon: SvgPicture.asset(
                  "assets/icon/icon_cube.svg",
                  width: Constants.appBarIconSize + 2.0,
                  height: Constants.appBarIconSize + 2.0,
                  color: Color(findStore.tile
                      ");true,
            elevation: 0,
          ),
    );
  }
}

內(nèi)容lib/containers/Find.dart

檢測(cè)到數(shù)據(jù)發(fā)生變化，頁(yè)面重新渲染得到新的頁(yè)面

import "package:flutter/material.dart";
import "package:flutter_book/widgets/Find/BookTile.dart";
import "package:flutter_book/widgets/Find/BookCover.dart";

import "package:flutter_book/stores/findStore.dart";
import "package:provider/provider.dart";
import "package:flutter_mobx/flutter_mobx.dart";

class Find extends StatefulWidget {
  @override
  _FindState createState() => _FindState();
}

class _FindState extends State<Find> {
  @override
  Widget build(BuildContext context) {
    final findStore = Provider.of(context);
    return Observer(builder: (_) => findStore.tile ");

FindStore lib/stores/findStore.dart

import "package:mobx/mobx.dart";

// Include generated file
part "findStore.g.dart";

// This is the class used by rest of your codebase
class FindStore = _FindStore with _$FindStore;

// The store-class
abstract class _FindStore implements Store {
  @observable
  bool tile = false;

  @observable
  num count = 0;

  @action
  void setTile(String key, dynamic value) => tile = value;

  @action
  num counter() => this.count++;
}

注意

如果你是很多個(gè)頁(yè)面共享一個(gè)Store不要直接導(dǎo)入然后實(shí)例化,例如：

第一個(gè)頁(yè)面 demo1.dart

這個(gè)頁(yè)面我們導(dǎo)入了counter.dart這個(gè)store而且我們將它實(shí)例化，當(dāng)我們點(diǎn)擊的時(shí)候數(shù)據(jù)發(fā)生變化頁(yè)面會(huì)重新渲染

import "package:flutter/material.dart";
import "package:flutter_mobx/flutter_mobx.dart";

import "counter.dart"; // Import the Counter

final counter = Counter(); // Instantiate the store

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "MobX",
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("MobX Counter"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "數(shù)值是:",
            ),
            // Wrapping in the Observer will automatically re-render on changes to counter.value
            Observer(
              builder: (_) => Text(
                    "${counter.value}",
                    style: Theme.of(context).textTheme.display1,
                  ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: counter.increment,
        tooltip: "Increment",
        child: Icon(Icons.add),
      ),
    );
  }
}

第二個(gè)頁(yè)面 demo2.dart

這個(gè)頁(yè)面我們也導(dǎo)入了counter.dart，我們要的結(jié)果是第一個(gè)頁(yè)面的數(shù)據(jù)變化了也影響這個(gè)頁(yè)面，但是顯然是不能的。因?yàn)?b>store雖然是一個(gè)，但是實(shí)例化的時(shí)候是兩個(gè)不同的，所以第一個(gè)頁(yè)面的數(shù)據(jù)變化了也不會(huì)影響到這里。

怎么解決呢？我們可以使用之前提到的Provider去將Mobx與Flutter聯(lián)系起來(lái)然后通過(guò)上下關(guān)系去的到我們想要的Store，例如final findStore = Provider.of(context);

import "package:flutter/material.dart";
import "package:flutter_mobx/flutter_mobx.dart";

import "counter.dart"; // Import the Counter

final counter = Counter(); // Instantiate the store

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "MobX",
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("MobX Counter"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "第二個(gè)頁(yè)面顯示第一個(gè)頁(yè)面的數(shù)是:",
            ),
            Observer(
              builder: (_) => Text(
                    "${counter.value}",
                    style: Theme.of(context).textTheme.display1,
                  ),
            ),
          ],
        ),
      ),
    );
  }
}

公共的Store counter.dart

import "package:mobx/mobx.dart";

// Include generated file
part "counter.g.dart";

// This is the class used by rest of your codebase
class Counter = _Counter with _$Counter;

// The store-class
abstract class _Counter implements Store {
  @observable
  int value = 0;

  @action
  void increment() {
    value++;
  }
}

正確的使用方法

頁(yè)面1-導(dǎo)航欄

頁(yè)面2-內(nèi)容

公共Store

將Mobx和Flutter聯(lián)系起來(lái)

結(jié)束語(yǔ)

感謝你的圍觀，目前是我寫Flutter遇到的一些坑，歡迎大家一踩坑，大家有什么意見(jiàn)和建議都可以提出來(lái)，謝謝。

GPU云服務(wù)器云服務(wù)器實(shí)戰(zhàn)android應(yīng)用開(kāi)發(fā) android應(yīng)用開(kāi)發(fā)實(shí)戰(zhàn) Mobx linux集群應(yīng)用實(shí)戰(zhàn) 網(wǎng)盤

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/7292.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

wyk1184

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

stylus編碼規(guī)范

閱讀 2023·2019-08-30 15:54
react進(jìn)階漫談

閱讀 3565·2019-08-30 15:52
【CSS】CSS 世界 -- 元素的顯示與隱藏學(xué)習(xí)總結(jié)

閱讀 1857·2019-08-29 17:20
CSS8:到底什么是BFC？

閱讀 2553·2019-08-29 17:08
數(shù)據(jù)上報(bào)分析一

閱讀 2378·2019-08-26 13:24
手機(jī)端頁(yè)面在項(xiàng)目中遇到的一些問(wèn)題及解決辦法（持續(xù)更新）

閱讀 838·2019-08-26 11:59
Get和Post的區(qū)別

閱讀 2814·2019-08-23 14:50
前端常用的工具類函數(shù), 持續(xù)更新中

閱讀 666·2019-08-23 14:20

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Flutter+Mobx實(shí)戰(zhàn)，寫一個(gè)App應(yīng)用

相關(guān)文章

Android程序員完全沒(méi)時(shí)間提升自己怎么辦？

Flutter交互實(shí)戰(zhàn)－即刻App探索頁(yè)下拉＆拖拽效果

Flutter交互實(shí)戰(zhàn)－即刻App探索頁(yè)下拉＆拖拽效果

發(fā)表評(píng)論

0條評(píng)論

wyk1184

男|高級(jí)講師

TA的文章

stylus編碼規(guī)范

react進(jìn)階漫談

【CSS】CSS 世界 -- 元素的顯示與隱藏學(xué)習(xí)總結(jié)

CSS8:到底什么是BFC？

數(shù)據(jù)上報(bào)分析一

手機(jī)端頁(yè)面在項(xiàng)目中遇到的一些問(wèn)題及解決辦法（持續(xù)更新）

Get和Post的區(qū)別

前端常用的工具類函數(shù), 持續(xù)更新中

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Flutter+Mobx實(shí)戰(zhàn)，寫一個(gè)App應(yīng)用

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！