Flutter 中 Provider 的使用指南

目录

1.什么是 Provider

2.如何安装 Provider

3.基本使用方式

1.使用ChangeNotifierProvider提供状态

2.使用 Provider.of 手动读取状态

3.多Provider 的使用

4.常见的 Provider 类型


        在 Flutter 开发中,状态管理是一个常见的需求。Provider 是 Flutter 官方推荐的一种简单而强大的状态管理解决方案。本文将介绍 Provider 的基本用法和一些常见场景下的应用。

1.什么是 Provider

        Provider 是一个 Flutter 的插件包,旨在简化状态管理和依赖注入。它使用 InheritedWidget 作为底层实现,通过提供一种订阅与更新的机制,能够让应用在状态变化时自动刷新对应的 UI,极大地提升了开发体验。

2.如何安装 Provider

        在项目的 pubspec.yaml 文件中添加 Provider:

dependencies:

        provider: ^6.1.2

        然后执行以下命令安装依赖:

flutter pub get

3.基本使用方式

        在使用 Provider 之前,我们需要定义一个简单的状态类。以下是一个计数器的示例:

import 'package:flutter/material.dart';class Counter with ChangeNotifier{int _count = 0;int get count => _count;void increment(){_count++;notifyListeners();//通知监听者刷新}
}

        在这里,Counter 类包含一个 count 属性和一个 increment 方法。ChangeNotifier 的 notifyListeners 方法会通知所有监听此对象的 Widget 更新界面。

1.使用ChangeNotifierProvider提供状态

        在应用的根组件中使用 ChangeNotifierProvider,将 Counter 类实例注入到 Widget 树中,使整个应用都可以访问它的状态。

void main() {runApp(ChangeNotifierProvider(create: (context) => Counter(),child: const MyApp(),),);
}

2. 使用 Consumer 或 Provider.of 读取状态

class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text(widget.title),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Consumer(builder: (context,counter,child){return Text('$_counter',style: Theme.of(context).textTheme.headlineMedium,);}),],),),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',child: const Icon(Icons.add),), // This trailing comma makes auto-formatting nicer for build methods.);}
}

        在这个例子中,Consumer 会自动监听 Counter 对象的变化,并在 count 值更新时重建它内部的 UI。

2.使用 Provider.of 手动读取状态

        Provider.of 可以用于获取 Provider 提供的对象。若不需要 UI 自动更新,可以使用 listen: false 参数,以避免不必要的重建。

floatingActionButton: FloatingActionButton(

  onPressed: () {

    Provider.of<Counter>(context, listen: false).increment();

  },

  child: Icon(Icons.add),

)

3.多Provider 的使用

        当应用需要管理多个状态时,可以使用 MultiProvider 将多个状态注入 Widget 树中:

void main() {

  runApp(

    MultiProvider(

      providers: [

        ChangeNotifierProvider(create: (context) => Counter()),

        ChangeNotifierProvider(create: (context) => AnotherModel()),

      ],

      child: MyApp(),

    ),

  );

}

4.常见的 Provider 类型

        常见的Provider有以下几种类型:

        Provider:适用于提供静态数据或单次创建的数据,例如配置文件、常量等。

        ChangeNotifierProvider:用于响应式状态管理,结合 ChangeNotifier 使用,适合需要动态更新 UI 的场景。

        FutureProvider:用于处理异步数据加载,可以绑定一个 Future 并将结果传递给子组件。            StreamProvider:监听数据流的变化,适合接收事件流的场景。

        我们可以通过下面的例子看一下FutureProvider的用法:

        假设我们有一个异步数据源,可以使用 FutureProvider 来处理:

Future<String> fetchData() async {await Future.delayed(Duration(seconds: 2));return "从服务器获取的数据";}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return FutureProvider<String>(create: (_) => fetchData(),initialData: "加载中...",child: MaterialApp(home: DataScreen(),),);}}class DataScreen extends StatelessWidget {@overrideWidget build(BuildContext context) {final data = Provider.of<String>(context);return Scaffold(appBar: AppBar(title: Text("FutureProvider 示例")),body: Center(child: Text(data),),);}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/885430.shtml

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

相关文章

《计算机原理与系统结构》学习系列——存储器(上)

系列文章目录 目录 存储器技术概要存储器层次cache&#xff0c;内存辅存存储器技术SRAM技术DRAM技术闪存磁盘存储器 局部性原理 高速缓存cache访存性能概念命中与缺失访存阻塞的周期数 cache基础&#xff1a;直接映射块号内存地址字段缺失缺失处理和写策略 全相联映射组相连映…

lua入门教程:type函数

在Lua中&#xff0c;type 函数是一个内置函数&#xff0c;用于返回给定值的类型。Lua 支持多种数据类型&#xff0c;包括 nil&#xff08;空值&#xff09;、boolean&#xff08;布尔值&#xff09;、number&#xff08;数字&#xff09;、string&#xff08;字符串&#xff09…

Centos 7离线安装ntpd服务

本文涉及一次Centos 7系统中离线安装ntpd对时服务的过程&#xff0c;其目的是为了在服务器运行过程中能够实时同步时间。 问题提出 某服务器需部署业务程序&#xff0c;这些程序的部署脚本是我初创的&#xff0c;后因其它事转交给其他人&#xff0c;后再因其它事又兜兜转转到了…

github高分项目 WGCLOUD - 运维实时管理工具

GitHub - tianshiyeben/wgcloud: Linux运维监控工具&#xff0c;支持系统硬件信息&#xff0c;内存&#xff0c;CPU&#xff0c;温度&#xff0c;磁盘空间及IO&#xff0c;硬盘smart&#xff0c;GPU&#xff0c;防火墙&#xff0c;网络流量速率等监控&#xff0c;服务接口监测&…

A021基于Spring Boot的自习室管理和预约系统设计与实现

&#x1f64a;作者简介&#xff1a;在校研究生&#xff0c;拥有计算机专业的研究生开发团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339; 赠送计算机毕业设计600…

【GPT使用技巧】用AI出一门课

提问 我想做一个ChatGPT的课程&#xff0c;针对小白&#xff0c;解决从0到1的问题。按照小白的通点&#xff0c;列出大家最关心的问题&#xff0c;做一个课程大纲给我。避免生涩语言&#xff0c;用小白理解和关心的方式展示。 GPT的回答结果 课程大纲&#xff1a;ChatGPT入门…

【EasyExcel】EasyExcel导出表格包含合计行、自定义样式、自适应列宽

目录 0 EasyExcel简介1 Excel导出工具类设置自定义表头样式设置自适应列宽添加合计行 2 调用导出工具类导出Excel表3 测试结果 0 EasyExcel简介 在数据处理和报表生成的过程中&#xff0c;Excel是一个非常常用的工具。特别是在Java开发中&#xff0c;EasyExcel库因其简单高效而…

2024年11月09号Drawing Memory Models Review 2

So lets start with a piece of code that well be thinking about and take a few seconds to read it carefully and try to explain, in your own words, what this piece of code does.

【HarmonyOS】鸿蒙应用低功耗蓝牙BLE的使用心得 (二)

【HarmonyOS】鸿蒙应用低功耗蓝牙BLE的使用心得 &#xff08;二&#xff09; 一、前言 目前鸿蒙应用的实现逻辑&#xff0c;基本都是参考和移植Android端来实现。针对BLE低功耗蓝牙来说&#xff0c;在鸿蒙化的实现过程中。我们发现了&#xff0c;鸿蒙独有的优秀点&#xff0c…

2024年【流动式起重机司机】模拟考试及流动式起重机司机证考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 流动式起重机司机模拟考试考前必练&#xff01;安全生产模拟考试一点通每个月更新流动式起重机司机证考试题目及答案&#xff01;多做几遍&#xff0c;其实通过流动式起重机司机模拟考试题很简单。 1、【多选题】( )和…

混合搜索与多重嵌入:一次有趣又毛茸茸的猫咪搜索之旅!(二)

这是继上一篇文章 “混合搜索与多重嵌入&#xff1a;一次有趣又毛茸茸的猫咪搜索之旅&#xff01;&#xff08;一&#xff09;” 的续篇。这这篇文章中&#xff0c;我们讲使用本地 Elasticsearch 部署来完成整个演示。这是一个简单的 Python Web 应用程序&#xff0c;展示了可…

【CSS】清除浮动(父元素塌陷)

在CSS布局中&#xff0c;“清除浮动”通常指的是消除由浮动元素引起的某些副作用&#xff0c;特别是当这些浮动元素影响到后续元素或者父元素的高度计算时。浮动元素会使它们脱离正常的文档流&#xff0c;这可能导致一些意料之外的效果&#xff0c;比如父元素高度塌陷&#xff…

算法【Java】—— 动态规划之路径问题

前言 本文章终点解析第一道题目【不同路径】和最后一道题目【地下城游戏】的动态规划思路&#xff0c;中间几道题目会很快过完&#xff0c;大家如果不熟悉动态规划的思路可以重点看一下这两道题目的解析。 不同路径 https://leetcode.cn/problems/unique-paths 解析&#xf…

FPGA实现串口升级及MultiBoot(五)通过约束脚本添加IPROG实例

本文目录索引 一个指令和三种方式通过约束脚本添加Golden位流工程MultiBoot位流工程验证example1总结代码缩略词索引: K7:Kintex 7V7:Vertex 7A7:Artix 7MB:MicroBlaze上一篇文章种总结了MultiBoot 关键技术,分为:一个指令、二种位流、三种方式、四样错误。针对以上四句话我…

jmeter基础02_下载安装jmeter

&#xff08;安装包windows、mac、Linux通用&#xff09; Step1. 官网下载 官网地址&#xff1a;https://jmeter.apache.org/download_jmeter.cgi 官网可见最新版本的jmeter和要求的jdk版本&#xff0c;先说结论&#xff1a;建议下载Binaries-zip格式包即可。 安装包有2大类&am…

Spring Boot环境下的知识分类与检索

2 开发技术 2.1 VUE框架 Vue.js&#xff08;读音 /vjuː/, 类似于 view&#xff09; 是一套构建用户界面的渐进式框架。 Vue 只关注视图层&#xff0c; 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 2.2 Mysql数据库 …

【Threejs】相机控制器动画

使用场景 官方提供了一个基于目标点、刷新速度&#xff0c;在每次renderer中执行的动画&#xff0c;但实际开发中你可能会需要基于设定时间、目标点添加动画&#xff0c;并且有更多自定义成分的方式 获取当前状态下控制器和相机的姿态 getVisionCof() {let { controls } thi…

理解鸿蒙app 开发中的 context

是什么 Context是应用中对象的上下文&#xff0c;其提供了应用的一些基础信息&#xff0c;例如resourceManager&#xff08;资源管理&#xff09;、applicationInfo&#xff08;当前应用信息&#xff09;、dir&#xff08;应用文件路径&#xff09;、area&#xff08;文件分区…

【JS】如何设置一个只读属性

1. Object.defineProperty 通过属性描述符将属性设置为不可修改 const obj {}; Object.defineProperty(obj, name, {value: John,writable: false, // 不允许修改该属性configurable: true, // 允许删除或修改属性描述符 });console.log(obj.name); // 输出: Johnobj.name …

YOLOv6-4.0部分代码阅读笔记-inferer.py

inferer.py yolov6\core\inferer.py 目录 inferer.py 1.所需的库和模块 2.class Inferer: 3.class CalcFPS: 1.所需的库和模块 #!/usr/bin/env python3 # -*- coding:utf-8 -*- # 用于模型的推理。 import os import cv2 import time import math import torch import…