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.rhkb.cn/news/378817.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android中OkHttp3中超时时间概述

目录 前言connectTimeoutreadTimeoutwriteTimeoutcallTimeoutpingInterval拓展 前言 可以看到&#xff0c;使用还是很简单的。主要相关的有这五个参数&#xff0c;其中我们常用到是就是connectTimeout、readTimeout和writeTimeout。 再看上图&#xff0c;可以看到默认下connec…

电脑压缩视频文件 电脑压缩视频大小的方法

在数字化时代&#xff0c;视频已成为我们记录生活、分享快乐的重要工具。然而&#xff0c;大尺寸的视频文件常常让分享和存储变得棘手。如何在保持视频画质的前提下&#xff0c;轻松减小视频文件大小&#xff1f;今天&#xff0c;就让我们一起探索苹果电脑上的几种高效视频压缩…

探索Facebook的最新更新:社交体验的新高度

Facebook作为全球领先的社交媒体平台&#xff0c;一直致力于不断创新和改进&#xff0c;以提供更优质的用户体验。近期&#xff0c;Facebook推出了一系列新的更新&#xff0c;旨在提升用户的社交互动体验和平台功能。本文将详细探讨这些最新更新&#xff0c;分析其对用户和社交…

nginx全局块的user指令

文章目录 1、user指令1.1、进入nginx解压的目录1.2、./configure --help1.3、工作进程默认是nobody 2、user指令的使用步骤:2.1、设置一个用户信息"www"2.2、 创建一个用户2.3、./nginx -s reload2.4、创建/root/html/index.html页面&#xff0c;添加如下内容2.5、修…

数电基础 - 模数转换

目录 一. 简介 二. A/D转换器 三. 取样-保持电路 四. 并联比较型A/D转换器 五. 反馈比较型A/D转换器 六. 双积分型A/D转换器 七. V-F变换型A/D转换器 八. 总结 一. 简介 模数转换&#xff08;Analog-to-Digital Conversion&#xff0c;简称 ADC&#xff09;是将模拟信号…

AV1技术学习: Compound Prediction

一、双向 Compound Prediction AV1支持两个参考帧的预测通过多种复合模式线性组合。复合预测公式为 其中&#xff0c;权重m(x, y) is scaled by 64 以进行整数计算&#xff0c;R1(x, y)和R2(x, y)表示两个参考块中位于(x, y)的像素。P(x, y)将按比例缩小 1/64 以形成最终的预测…

taocms 3.0.1 本地文件泄露漏洞(CVE-2021-44983)

前言 CVE-2021-44983 是一个影响 taoCMS 3.0.1 的远程代码执行&#xff08;RCE&#xff09;漏洞。该漏洞允许攻击者通过上传恶意文件并在服务器上执行任意代码来利用这一安全缺陷。 漏洞描述 taoCMS 是一个内容管理系统&#xff08;CMS&#xff09;&#xff0c;用于创建和管…

使用 ABBYY FineReader PDF 15 在创建或转换 PDF 时自动生成书签

使用 ABBYY 为 PDF 文件添加书签&#xff0c;可以帮助快速定位文档中的主要内容&#xff0c;也能更方便的梳理出一份文档大纲。 有很多 PDF 文件在创建时并没有编辑书签&#xff0c;这里介绍使用 ABBYY FineReader PDF 15&#xff08;Win 系统&#xff09;在 PDF 中自动添加书…

Windows上LabVIEW编译生成可执行程序

LabVIEW项目浏览器(Project Explorer)中的"Build Specifications"就是用来配置项目发布方法的。在"Build Specifications"右键菜单中选取"New"&#xff0c;可以看到程序有几种不同的发布方法&#xff1a;Application(EXE)、Installer、.Net Inte…

EasyPhoto - 一键训练并生成人像写真,支持参考图生成 独立版 本地一键整合包下载

EasyPhoto最早是作为AI绘画软件StableDiffusion的一款插件备受大家喜爱&#xff0c;今天分享的是 EasyPhoto 的独立版本一键整合包&#xff0c;无需安装StableDiffusion即可解压即用。 和之前分享的腾讯开源的 PhotoMaker 和 阿里开源的 FaceChain 类似&#xff0c;EasyPhoto操…

数据库系统概论:数据库系统模式

数据库系统在我们的数字世界中扮演着至关重要的角色&#xff0c;无论是个人设备还是企业级应用&#xff0c;数据的有效管理和访问都是必不可少的。而数据库系统的模式结构是确保数据一致性和可访问性的关键组成部分。 数据库系统模式 基本概念 型和值 数据模型中有 型(type…

网络开局 与 Underlay网络自动化

由于出口和核心设备 部署在核心机房,地理位置集中,业务复杂,开局通常需要网络工程师进站调测。 因此核心层及核心以上的设备(包含核心层设备,旁挂独立AC设备和出口设备)推荐采用WEB网管开局方式或命令行开局方式。 核心以下的设备(包含汇聚层设备、接入层设备和AP)由于数量众…

MySQL第一次作业

一、库的建立 mysql> show databases; -------------------- | Database | -------------------- | information_schema | | mydb2_stuinfo | | mydb3_employee | | mydb4_product | | mydbl_test | | mysql | | performance…

【Java项目笔记】01项目介绍

一、技术框架 1.后端服务 Spring Boot为主体框架 Spring MVC为Web框架 MyBatis、MyBatis Plus为持久层框架&#xff0c;负责数据库的读写 阿里云短信服务 2.存储服务 MySql redis缓存数据 MinIO为对象存储&#xff0c;存储非结构化数据&#xff08;图片、视频、音频&a…

Java中的迭代器(Iterator)

Java中的迭代器&#xff08;Iterator&#xff09; 1、 迭代器的基本方法2、 迭代器的使用示例3、注意事项4、克隆与序列化5、结论 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在Java中&#xff0c;迭代器&#xff08;Iterator&#xff0…

Kafka 高并发设计之数据压缩与批量消息处理

《Kafka 高性能架构设计 7 大秘诀》专栏第 6 章。 压缩&#xff0c;是一种用时间换空间的 trade-off 思想&#xff0c;用 CPU 的时间去换磁盘或者网络 I/O 传输量&#xff0c;用较小的 CPU 开销来换取更具性价比的磁盘占用和更少的网络 I/O 传输。 Kafka 是一个高吞吐量、可扩展…

240717.LeetCode——2974.最小数字游戏

题目描述 你有一个下标从 0 开始、长度为 偶数 的整数数组 nums &#xff0c;同时还有一个空数组 arr 。Alice 和 Bob 决定玩一个游戏&#xff0c;游戏中每一轮 Alice 和 Bob 都会各自执行一次操作。游戏规则如下&#xff1a; 每一轮&#xff0c;Alice 先从 nums 中移除一个 …

Spring Security之安全异常处理

前言 在我们的安全框架中&#xff0c;不管是什么框架&#xff08;包括通过过滤器自定义&#xff09;都需要处理涉及安全相关的异常&#xff0c;例如&#xff1a;登录失败要跳转到登录页&#xff0c;访问权限不足要返回页面亦或是json。接下来&#xff0c;我们就看看Spring Sec…

llama-index,uncharted and llama2:7b run locally to generate Index

题意&#xff1a;本地运行 llama-index、uncharted 以及 llama2:7b 来生成索引 问题背景&#xff1a; I wanted to use llama-index locally with ollama and llama3:8b to index utf-8 json file. I dont have a gpu. I use uncharted to convert docs into json. Now If it …