快捷導(dǎo)航

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

更新時間：2022年12月06日 09:37:11 作者：顧安

這篇文章主要為大家介紹了Flutter狀態(tài)管理Provider示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

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

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

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

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

Provider

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

Redux

Redux是一種單向數(shù)據(jù)流架構(gòu)，可以輕松開發(fā)，維護和測試應(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 添加這樣一行（并運行隱式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
          ),
        ),
      ),
    );
  }
}