日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁 編程語言 正文

Flutter狀態(tài)管理Provider示例解析_Android

作者：顧安 ? 更新時間： 2023-01-02 編程語言

什么是狀態(tài)管理

狀態(tài)管理是一個十分廣泛的概念，因?yàn)闋顟B(tài)無處不在。從廣義角度講狀態(tài)管理就是頁面跟代碼、跟服務(wù)器進(jìn)行數(shù)據(jù)同步。例如：你在某購物應(yīng)用內(nèi)，添加了一件商品，你需要在購物車頁面進(jìn)行展示。這就是一種狀態(tài)。相反的，你在商品頁面點(diǎn)擊了添加到購物車，卻在購物車頁面沒有發(fā)現(xiàn)或者過段時間它才展示了，這就是狀態(tài)管理沒有做好。這就是我所理解的狀態(tài)管理。

官方給出的解釋：狀態(tài)管理就是當(dāng)某個狀態(tài)發(fā)生改變的時候，告知使用該狀態(tài)的狀態(tài)監(jiān)聽者，讓狀態(tài)所監(jiān)聽的屬性隨之改變,從而達(dá)到聯(lián)動效果。

常見的狀態(tài)管理框架有哪些

Provider

Provider是官方文檔的例子用的方法，Google 比較推薦的用法，也是今天的主角。Provider的實(shí)現(xiàn)在內(nèi)部還是利用了InheritedWidget，它就是用于提供數(shù)據(jù)，可以很方便的管理狀態(tài)。

Redux

Redux是一種單向數(shù)據(jù)流架構(gòu)，可以輕松開發(fā)，維護(hù)和測試應(yīng)用程序，也是google推薦的狀態(tài)管理方式。所有的狀態(tài)都存儲在Store里，View拿到Store的狀態(tài)數(shù)據(jù)會映射成視圖渲染。Redux不直接讓view操作數(shù)據(jù)，通過dispatch一個action通知Reducer，狀態(tài)變更（類似于vue中的vuex）。

GetX

GetX包含很多功能，各種彈出widget、路由管理、國際化、Utils、狀態(tài)管理等所以我覺得它不單單是一個狀態(tài)管理器，更像是一個框架（類似于vue cli）。關(guān)于GetX的爭論也很多，今天我們不討論。我的建議是，對于像我一樣的小白，還是從Provider開始，打好基礎(chǔ)再說。

Provider 使用

添加依賴

  • 使用命令行方式
flutter pub add provider
  • pubspec.yaml 添加這樣一行（并運(yùn)行隱式flutter pub get）：
dependencies:
provider: ^6.0.4

導(dǎo)入應(yīng)用

import 'package:provider/provider.dart';

定義需要共享的數(shù)據(jù)

class ProviderData with ChangeNotifier {
  int count = 0;
  void increment() {
    count++;
    notifyListeners();
  }
}

在應(yīng)用程序入口初始化

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import './provider/index.dart';
import './page/HomePage.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => CountNotifier(),
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
         home: const Scaffold(
            body: HomePage(),
          ),
      ),
    );
  }
}

使用共享數(shù)據(jù)

import 'package:flutter/material.dart';
import 'package:flutter_provider_example/provider_count_example/count_notifier.dart';
import './provider/provider.dart';
class ProviderExample extends StatefulWidget {
  const ProviderExample({Key? key}) : super(key: key);
  @override
  State<ProviderExample> createState() => _ProviderExampleState();
}
class _ProviderExampleState extends State<ProviderExample> {
  final counter = Provider.of<ProviderData>(context);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("InheritedWidget"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          counter.increment();
        },
        child: const Icon(Icons.add),
      ),
      body: Center(
        child: Text(counter.count.toString(),
          style: const TextStyle(
              color: Colors.red,
              fontSize: 50
          ),
        ),
      ),
    );
  }
}

狀態(tài)管理的好處

  • 能有效分離 UI 層和數(shù)據(jù)處理層
  • 幫助前端應(yīng)用結(jié)構(gòu)化數(shù)據(jù)
  • 有效控制狀態(tài)的變化
  • 處理同步與異步
  • 實(shí)現(xiàn)一些日志打印，熱加，同構(gòu)應(yīng)用等功能
  • ...

結(jié)束語

原文鏈接：https://juejin.cn/post/7169045609909846046

欄目分類
最近更新