Flutter 中 Provider 的使用指南

devtools/2024/11/12 20:37:58/

目录

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 之前,我们需要定义一个简单的状态类。以下是一个计数器的示例:

Dart">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 树中,使整个应用都可以访问它的状态。

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

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

Dart">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 来处理:

Dart">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.ppmy.cn/devtools/132874.html

相关文章

shell中执行hive指令以及hive中执行shell和hdfs指令语法

0. 简介 主要介绍了三种环境命令执行语法&#xff1a; shell中执行hive指令hive中执行shell指令hive中执行hdfs指令 1. shell中执行hive指令 语法&#xff1a;hive [-hiveconf xy]* [<-i filename>]* [<-f filename> | <-e query-string>] [-S] 说明&…

u盘怎么重装电脑系统_u盘重装电脑系统步骤和详细教程【新手宝典】

u盘怎么重装电脑系统&#xff1f;一个u盘怎么重装电脑系统呢&#xff0c;需要将u盘制作成u盘启动盘pe&#xff0c;然后通过U盘启动盘进入pe进行安装系统&#xff0c;下面小编就教大家u盘重装电脑系统步骤和详细教程。 u盘启动是什么意思&#xff1f; U盘启动盘是一种具有特殊功…

Redis - 主从复制

在分布式系统中为了解决单点问题&#xff0c;通常会把数据复制多个副本部署到其他服务器&#xff0c;满⾜故障恢 复和负载均衡等需求。Redis也是如此&#xff0c;它为我们提供了复制的功能&#xff0c;实现了相同数据的多个Redis副 本。复制功能是⾼可⽤Redis的基础&#xff0c…

编译ffmpeg动态库时设置RPATH为$ORIGIN

原本&#xff0c;我这样编译: ./configure \--enable-xxx \--disable-yyy \...为了设置 RPATH, 尝试了在 configure 后面设置&#xff0c;如下几种都无效: --extra-ldsoflags"-Wl,-rpath,$ORIGIN" 没有 RPATH--extra-ldsoflags"-Wl,-rpath,$ORIGIN" 没有…

【前端】Svelte:核心语法和组件基础

本教程将详细介绍 Svelte 的核心语法和组件基础&#xff0c;包括 <script>、<style> 和 HTML 模板的使用方法。我们将通过实例掌握双向数据绑定、条件渲染、循环等基本语法&#xff0c;最后编写简单的交互式组件。 Svelte 组件机制 Svelte 使用组件化结构来组织代…

Chromium127编译指南 Mac篇(二)- 安装Xcode

1. 概述 在Chromium开发的道路上&#xff0c;为Mac平台搭建正确的环境是至关重要的第一步。本文将聚焦于Xcode的安装过程&#xff0c;它作为Mac上不可或缺的开发工具&#xff0c;为Chromium的编译提供了必要的编译器和工具链。 我们将详细解析如何选择、下载并安装适合Chromium…

springboot系列--web相关知识探索七

一、前言 web相关知识探索六中研究了接口数据响应与简单的内容协商的底层原理。本次主要是探索一下内容协商的底层原理。 二、内容协商 一、什么是内容协商 根据客户端接收能力不同&#xff0c;返回不同媒体类型的数据。 二、内容协商过程演示 一、问题 在项目开发中&#xf…

全排列(DFS)

给定一个不含重复数字的数组 nums &#xff0c;返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3] 输出&#xff1a;[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]]示例 2&#xff1a; 输入&#xff1a;nums …