Flutter使用Provider進(jìn)行狀態(tài)管理的實現(xiàn)

更新時間：2024年04月01日 11:22:40 作者：風(fēng)淺月明

Provider是Flutter中一個非常流行的狀態(tài)管理工具,它可以幫助開發(fā)者更有效地管理Widget樹中的數(shù)據(jù),本文主要介紹了Flutter使用Provider進(jìn)行狀態(tài)管理的實現(xiàn),感興趣的可以了解一下

一、使用Provider進(jìn)行狀態(tài)管理的基本用法

Provider是Flutter中一個非常流行的狀態(tài)管理工具，它可以幫助開發(fā)者更有效地管理Widget樹中的數(shù)據(jù)。Provider的核心思想是將數(shù)據(jù)模型放置在Widget樹中可以被多個子Widget訪問的地方，而不必通過構(gòu)造函數(shù)手動傳遞。

1.添加provider依賴

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

2.創(chuàng)建一個數(shù)據(jù)模型

import 'package:flutter/material.dart';

class CounterModel with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // 通知監(jiān)聽者數(shù)據(jù)改變
  }
}

3.在應(yīng)用中提供模型

在你的應(yīng)用中，你需要在一個合適的位置（如MaterialApp的上方）使用ChangeNotifierProvider來創(chuàng)建并提供CounterModel的實例。

import 'package:provider/provider.dart';

void main() {
  runApp(
    // 注意：ChangeNotifierProvider要包裝在MaterialApp之外
    ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

4.使用Consumer或Provider.of讀取和顯示數(shù)據(jù)

在你的HomeScreen中，你可以使用Consumer或Provider.of來讀取CounterModel的數(shù)據(jù)，并構(gòu)建UI。

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Provider Example'),
      ),
      body: Center(
        // 使用Consumer來監(jiān)聽CounterModel
        child: Consumer<CounterModel>(
          builder: (context, counter, child) => Text('${counter.count}'),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 不需要監(jiān)聽改變時，可以直接使用Provider.of來訪問模型
          Provider.of<CounterModel>(context, listen: false).increment();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

當(dāng)你點擊浮動按鈕時，increment方法會被調(diào)用，CounterModel中的計數(shù)器會增加，并通過notifyListeners通知Consumer重新構(gòu)建，這樣UI上顯示的數(shù)字就會更新。

注意：

使用Provider.of(context)時，如果你不需要監(jiān)聽變化，可以設(shè)置listen: false，這樣可以提高性能。
當(dāng)模型更新時，只有通過Consumer或者Provider.of(context)（并且listen設(shè)置為true）獲取模型的Widget才會重新構(gòu)建。

二、管理多個不同的狀態(tài)

如果你有多個不同的狀態(tài)需要管理，你通常會為每種狀態(tài)創(chuàng)建不同的模型。每個模型專注于管理一組相關(guān)的狀態(tài)數(shù)據(jù)和行為。這樣可以幫助你保持代碼的清晰和分離關(guān)注點，使得每個模型都保持簡單和專注。

但是，如果你的狀態(tài)數(shù)據(jù)非常緊密相關(guān)，并且它們通常一起改變，那么將它們放在同一個模型中也是有意義的。

1.創(chuàng)建多個模型

計數(shù)器模型

class CounterModel with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

主題色彩模型

class ThemeModel with ChangeNotifier {
  ThemeData _themeData = ThemeData.light();

  ThemeData get themeData => _themeData;

  void toggleTheme() {
    _themeData = _themeData == ThemeData.light() ? ThemeData.dark() : ThemeData.light();
    notifyListeners();
  }
}

2.同時管理多個狀態(tài)

在你的應(yīng)用中，你可以使用MultiProvider來同時提供多個模型：

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => CounterModel()),
        ChangeNotifierProvider(create: (context) => ThemeModel()),
      ],
      child: MyApp(),
    ),
  );
}

你現(xiàn)在可以根據(jù)ThemeModel提供的主題數(shù)據(jù)來構(gòu)建你的應(yīng)用程序：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<ThemeModel>(
      builder: (context, themeModel, child) {
        return MaterialApp(
          theme: themeModel.themeData,
          home: HomeScreen(),
        );
      },
    );
  }
}

這樣，你就可以在HomeScreen或者其他任何Widget中分別訪問和操作CounterModel和ThemeModel了。通過這種方式，你可以將應(yīng)用的不同部分的狀態(tài)管理分離開來，從而使你的代碼更加模塊化和可維護(hù)。

三、異步獲取狀態(tài)

有時，我們不想在模型內(nèi)部中直接管理狀態(tài)，而是每次修改SharedPreferences中的緩存數(shù)據(jù)，以及直接從SharedPreferences獲取狀態(tài)。更進(jìn)一步，比如異步從網(wǎng)絡(luò)獲取狀態(tài)，也是類似的。

比如，我們要管理一個訂閱狀態(tài)。

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

class SubscriptionStatusModel extends ChangeNotifier {

  // 訂閱狀態(tài)的異步讀取方法
  Future<bool> get isSubscribed async {
    final prefs = await SharedPreferences.getInstance();
    return prefs.getBool('isSubscribeValid') ?? false;
  }

  // 更新SharedPreferences中的訂閱狀態(tài)
  Future<void> updateSubscriptionStatus(bool newStatus) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setBool('isSubscribeValid', newStatus);
    notifyListeners();  // 通知監(jiān)聽器可能有變化
  }

}

在上面的代碼中，isSubscribed 現(xiàn)在是一個異步 getter，每次調(diào)用時都會從 SharedPreferences 中讀取訂閱狀態(tài)。updateSubscriptionStatus 方法現(xiàn)在會將新狀態(tài)寫入 SharedPreferences 并通知監(jiān)聽器。

這樣修改后，你就需要在UI中相應(yīng)地處理Future。例如，如果你在一個widget中使用這個模型，你可能需要使用 FutureBuilder：

FutureBuilder<bool>(
  future: provider.isSubscribed, // 假設(shè)` provider `是你的SubscriptionStatusModel實例
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      // 等待數(shù)據(jù)時返回加載指示器
      return CircularProgressIndicator();
    } else if (snapshot.hasError) {
      // 處理錯誤情況
      return Text('Error: ${snapshot.error}');
    } else {
      // 使用訂閱狀態(tài)來構(gòu)建widget
      bool isSubscribed = snapshot.data ?? false;
      return Text(isSubscribed ? 'Subscribed' : 'Not subscribed');
    }
  },
)

實際用例：

Stack(
  alignment: Alignment.center,
  children: [
    CustomScrollView(
       // ...
    ),
    Consumer<SubscriptionStatusModel>(builder: (context, provider, child) {
      return FutureBuilder<bool>(
        future: provider.isSubscribed,  
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            // 等待數(shù)據(jù)時返回加載指示器
            // return CircularProgressIndicator();
            return SizedBox.shrink();
          } else if (snapshot.hasError) {
            // 處理錯誤情況
            // return Text('Error: ${snapshot.error}');
            return SizedBox.shrink();
          } else {
            // 使用訂閱狀態(tài)來構(gòu)建widget
            bool isSubscribed = snapshot.data ?? false;
            return Visibility(
              visible: !isSubscribed,
              child: Positioned(
                left: 0,
                right: 0,
                bottom: 16,
                child: _subscribeButton(),
              ),
            );
          }
        },
      );
    }),
  ],
),

到此這篇關(guān)于Flutter使用Provider進(jìn)行狀態(tài)管理的實現(xiàn)的文章就介紹到這了,更多相關(guān)Flutter Provider狀態(tài)管理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: