小編給大家分享一下Flutter UI怎么使用Provide實(shí)現(xiàn)主題切換，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)主營旅順口網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都APP應(yīng)用開發(fā),旅順口h5微信小程序定制開發(fā)搭建,旅順口網(wǎng)站營銷推廣歡迎旅順口等地區(qū)企業(yè)咨詢

背景

provide是谷歌官方出品的一個(gè)狀態(tài)管理框架flutter-provide，它允許在小部件樹中傳遞數(shù)據(jù)，它被設(shè)計(jì)為ScopedModel的替代品，允許我們更加靈活地處理數(shù)據(jù)類型和數(shù)據(jù)

為什么需要狀態(tài)管理

在進(jìn)行項(xiàng)目的開發(fā)時(shí)，我們往往需要管理不同頁面之間的數(shù)據(jù)共享，在頁面功能復(fù)雜，狀態(tài)達(dá)到幾十個(gè)上百個(gè)的時(shí)候，我們會(huì)難以清楚的維護(hù)我們的數(shù)據(jù)狀態(tài)，本文將以主題切換這個(gè)功能使用狀態(tài)管理來講解如何在Flutter中使用provide這個(gè)狀態(tài)管理框架

為什么選擇Provide

一開始項(xiàng)目使用的是ScopedModel，使用ScopedModel可以分離展示邏輯和業(yè)務(wù)邏輯，而且簡單易用，但是ScopedModel有一些局限

如果模型較為復(fù)雜，當(dāng)狀態(tài)更新時(shí)，會(huì)有較多的不必要的更新

使用Provide

• 當(dāng)狀態(tài)發(fā)生變化時(shí)，widget樹會(huì)更新指定的節(jié)點(diǎn)，不會(huì)進(jìn)行整顆widget樹的更新

• Provide有泛型的優(yōu)勢，相當(dāng)于namespace的特性，使用過vuex的應(yīng)該知道namespace的重要性，它將我們的狀態(tài)分離開來

• Provide被設(shè)計(jì)為ScopedModel的替代品，同樣也有和ScopedModel的易用性

• Provide提供了Provide.stream可以以處理流的方式處理數(shù)據(jù)，不過目前還存在一些問題

項(xiàng)目地址

flutter-ui, 可參考項(xiàng)目中使用provide方法

效果

如何使用

添加依賴

查看 pub-install

在pubspec.yaml中引入依賴

dependencies:
 provide: ^1.0.2 #數(shù)據(jù)管理層

執(zhí)行

flutter packages get

在需要使用的頁面中引入

import 'package:provide/provide.dart'

創(chuàng)建model （這才第一步）

新建 lib/store/models/config_state_model.dart 文件

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart' show ChangeNotifier

class ConfigInfo {
 String theme = 'red';
}
class ConfigModel extends ConfigInfo with ChangeNotifier {
 Future $setTheme(payload) async {
  theme = payload;
  notifyListeners();
 }
}

用法同ScopedModel差不多，不過不需要繼承Model類，只需要混入ChangeNotifier，通過notifyListeners通知聽眾刷新

封裝Store （沒錯(cuò)，到這里已經(jīng)要快完成所有步驟了）

新建 lib/store/index.dart 文件

import 'package:flutter/material.dart'
import 'package:provide/provide.dart'
 show
  Providers
  Provider,
  Provide,
  ProviderNode;
import './models/config_state_model.dart' show ConfigModel;

class Store {
 // 我們將會(huì)在main.dart中runAPP實(shí)例化init
 static init({model, child, dispose = true}) {
  final providers = Providers()
   ..provide(Provider.value(ConfigModel()));
  return ProviderNode(
   child: child,
   providers: providers,
   dispose: dispose
  );
 }
 
 // 通過Provide小部件獲取狀態(tài)封裝
 static connect<T>({builder, child, scope}) {
  return Provide<T>(
   builder: builder,
   child: child,
   scope: scope
  );
 }
 
 // 通過Provide.value<T>(context)獲取封裝
 static T value<T>(context, {scope}) {
  return Provide.value<T>(context, scoped: scoped);
 }
}

需要管理多個(gè)狀態(tài)只需要

final providers = Providers()
..provide(Provider.value(ConfigModel()))
..provide(Provider.value(More()));

定義全局的Provide （倒數(shù)第二）

lib/main.dart 文件

import 'package:flutter/material.dart';
import 'package:efox_flutter/store/index.dart'
 show Store, ConfigModel;

// 將狀態(tài)放入到頂層
void main() => runApp(Store.init(child: MainApp()));
class MainApp extends StatefulWidget {
 @override
 MainAppState createState() => MainAppState();
}
class MainAppState extends State<MainApp> {
 @override
 Widget build(BuildContext context) {
  // 獲取Provide狀態(tài)
  return Store.connect<ConfigModel>(
   builder: (context, child, model) {
    return MaterialApp(
     theme: ThemeData(
      primaryColor: Color(model.theme)
     )
    );
   }
  );
 }
}

改變主題狀態(tài) （完成）

import 'package:flutter/material.dart';
import 'package:efox_flutter/store/index.dart'
 show ConfigModel, Store;

/**
* name: 顏色名稱 如 red
* color：顏色值
* context： 上下文
*/
Widget Edage(name, color, context) {
 return GestrueDetector(
  onTap: () {
   // 修改主題狀態(tài)
   Store.value<ConfigModel>(context).$setTheme(name)
  }
  child: Container(
   color: Color(color),
   height: 30,
   widtg: 30
  )
 );
}

看完了這篇文章，相信你對“Flutter UI怎么使用Provide實(shí)現(xiàn)主題切換”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站欄目：FlutterUI怎么使用Provide實(shí)現(xiàn)主題切換
鏈接分享：http://chinadenli.net/article40/ppcjeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、網(wǎng)站改版、網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司、營銷型網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)