当前位置: 首页 > news >正文

Flutter 状态管理新境界:多Provider并行驱动UI

前言

在上一篇文章中,我们讨论了如何使用 ProviderFlutter 中进行状态管理。

本篇文章我们来讨论如何使用多个 Provider

Flutter 中,使用 Provider 管理多个不同的状态时,你可以为每个状态创建一个单独的 ChangeNotifierProvider,并在需要的地方使用 Provider.of<T>(context)Consumer<T>来访问这些状态。

接下来让我们正式开始使用:

为每个状态创建类

为每个需要管理的状态创建一个类,并确保这些类继承自 ChangeNotifier

class Counter with ChangeNotifier {int _count = 0;int get count => _count;void increment() {_count++;notifyListeners();}
}class ThemeSwitcher with ChangeNotifier {bool _isDarkTheme = false;bool get isDarkTheme => _isDarkTheme;void toggleTheme() {_isDarkTheme = !_isDarkTheme;notifyListeners();}
}

在应用的根或需要的地方提供状态

使用 ChangeNotifierProvider 来包裹你的应用或特定的 widget,并为每个状态提供一个 create 函数来创建其对应的实例。

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {Widget build(BuildContext context) {return MultiProvider(providers: [ChangeNotifierProvider(create: (context) => Counter()),ChangeNotifierProvider(create: (context) => ThemeSwitcher()),],child: MaterialApp(home: MyHomePage(),),);}
}

在 widget 中访问状态

使用 Provider.of<T>(context)Consumer<T> 在需要的地方访问状态。

class MyHomePage extends StatelessWidget {Widget build(BuildContext context) {final counter = Provider.of<Counter>(context);final themeSwitcher = Provider.of<ThemeSwitcher>(context);return Scaffold(appBar: AppBar(title: Text('Multiple Providers Example'),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('You have pushed the button this many times:',),Text('${counter.count}',style: Theme.of(context).textTheme.headline4,),Switch(value: themeSwitcher.isDarkTheme,onChanged: (value) {themeSwitcher.toggleTheme();},),],),),floatingActionButton: FloatingActionButton(onPressed: () {counter.increment();},tooltip: 'Increment',child: Icon(Icons.add),),);}
}

更新状态

在状态类中修改属性,并调用 notifyListeners() 来通知所有监听这个状态的 widget 进行更新。

class Counter with ChangeNotifier {int _count = 0;int get count => _count;void increment() {_count++;notifyListeners();  // 通知所有监听这个状态的widget进行更新}
}class ThemeSwitcher with ChangeNotifier {bool _isDarkTheme = false;bool get isDarkTheme => _isDarkTheme;void toggleTheme() {_isDarkTheme = !_isDarkTheme;notifyListeners();  // 通知所有监听这个状态的widget进行更新}
}

完整示例

下面是一个例子,展示了如何使用 Provider 来管理两个不同的状态:

代码如下(示例):

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {Widget build(BuildContext context) {return MultiProvider(providers: [ChangeNotifierProvider(create: (context) => Counter()),ChangeNotifierProvider(create: (context) => ThemeSwitcher()),],child: MaterialApp(home: MyHomePage(),),);}
}class Counter with ChangeNotifier {int _count = 0;int get count => _count;void increment() {_count++;notifyListeners();}
}class ThemeSwitcher with ChangeNotifier {bool _isDarkTheme = false;bool get isDarkTheme => _isDarkTheme;void toggleTheme() {_isDarkTheme = !_isDarkTheme;notifyListeners();}
}class MyHomePage extends StatelessWidget {Widget build(BuildContext context) {final counter = Provider.of<Counter>(context);final themeSwitcher = Provider.of<ThemeSwitcher>(context);return Scaffold(appBar: AppBar(title: Text('Multiple Providers Example'),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('You have pushed the button this many times:',),Text('${counter.count}',style: Theme.of(context).textTheme.headline4,),Switch(value: themeSwitcher.isDarkTheme,onChanged: (value) {themeSwitcher.toggleTheme();},),],),),floatingActionButton: FloatingActionButton(onPressed: () {counter.increment();},tooltip: 'Increment',child: Icon(Icons.add),),);}
}

运行结果如下

总结

本文主要介绍了在 Flutter 中如何使用多个 Provider 进行状态管理。

类似的状态管理还有 BlocGetX 的使用,后续会继续分享它们的使用方式,欢迎关注。

– 欢迎点赞、关注、转发、收藏【我码玄黄】,gonghao同名

http://www.lryc.cn/news/403076.html

相关文章:

  • 标识符和关键字的区别是什么,常用的关键字有哪些?自增自减运算符,移位运算符continue、break、return的区别是什么?
  • 在VS Code上搭建Vue项目教程(Vue-cli 脚手架)
  • AGI 之 【Hugging Face】 的【零样本和少样本学习】之三 [无标注数据] 的简单整理
  • Docker 和 k8s 之间是什么关系?
  • 敲详细的springframework-amqp-rabbit源码解析
  • Telegram Bot、小程序开发(三)Mini Apps小程序
  • Django F()函数
  • GraphRAG的实践
  • 自动驾驶三维车道线检测系列—LATR: 3D Lane Detection from Monocular Images with Transformer
  • 守护动物乐园:视频AI智能监管方案助力动物园安全与秩序管理
  • FairGuard游戏加固入选《嘶吼2024网络安全产业图谱》
  • 数据仓库事实表
  • LeetCode题练习与总结:两数之和Ⅱ-输入有序数组--167
  • 在 Java 中,怎样设计一个可扩展且易于维护的微服务架构?
  • 零基础入门鸿蒙开发 HarmonyOS NEXT星河版开发学习
  • Chromium CI/CD 之Jenkins实用指南2024-在Windows节点上创建任务(九)
  • ceph进程网卡绑定逻辑
  • 学习opencv
  • 利用双端队列 实现二叉树的非递归的中序遍历
  • 昇思25天学习打卡营第18天 | 基于MindSpore的GPT2文本摘要
  • 科研绘图系列:R语言circos图(circos plot)
  • 追踪Conda包的踪迹:深入探索依赖关系与管理
  • 苹果电脑pdf合并软件 苹果电脑合并pdf 苹果电脑pdf怎么合并
  • axios(ajax请求库)
  • Ideal窗口中左右侧栏消失了
  • 麦芒30全新绽放,中国电信勾勒出AI手机的新方向
  • ​数据结构之初始二叉树(3)
  • egret 白鹭的编译太慢了 自己写了一个
  • <数据集>pcb板缺陷检测数据集<目标检测>
  • 实验四:图像的锐化处理