Flutter中 Provider 的基础用法超详细讲解(一)

发布于:2025-07-22 ⋅ 阅读:(17) ⋅ 点赞:(0)

目录

前言

一、什么是 Provider

二、引入 Provider 库

三、Provider 的基本结构

四、Provider的基础用法

1.ChangeNotifierProvider

1.ChangeNotifierProvider是什么

2.使用场景

3.示例代码

1.创建模型类

2.在入口处提供模型

3.在页面中使用模型

4.注意事项

2.FutureProvider

1.什么是FutureProvider

2.示例用法

1.创建异步函数

2.使用FutureProvider提供异步结果

3.注意事项


前言

        在 Flutter 的状态管理方案中,Provider 是一个非常常用且推荐的库。它轻量、功能强大、集成简洁,是 Google 官方推荐的状态管理工具之一。本文将通过一个完整示例,带你一步步掌握 Provider 的基础用法。

一、什么是 Provider

        简单来说,Provider 是基于 InheritedWidget 封装的一套状态管理工具。它的核心目标是 “提供数据并让子组件监听这些数据的变化”。

        相比直接使用 setState() 来更新页面,Provider 提供了更清晰、模块化的管理方式。

二、引入 Provider 库

        在 pubspec.yaml 中添加依赖:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.8
  provider: ^6.1.5

安装依赖:

flutter pub get

三、Provider 的基本结构

        我们先看一张概念图:

MaterialApp
  └── ChangeNotifierProvider(提供模型)
        └── Consumer 或 context.watch<T>()(监听数据)

        你可以把 ChangeNotifierProvider 理解为数据的“提供者”,而 Consumer 是数据的“消费者”。

四、Provider的基础用法

1.ChangeNotifierProvider

1.ChangeNotifierProvider是什么

        ChangeNotifierProvider 是 provider 包中的一个类,它结合了 ChangeNotifier 和 InheritedWidget 的能力,用于构建响应式的 UI。

        它的作用是监听一个ChangeNotifier对象,并在数据变更时自动更新界面。

        常用于ViewModel(或State)的管理。

2.使用场景

        当你有一个对象内部状态需要变化,并且你希望在状态变化时通知 UI 更新,那么你就可以使用 ChangeNotifierProvider。

3.示例代码

        我们以下面的UI效果为例,看一下ChangeNotifierProvider的用法。

       在下面的demo中,我们点击按钮之后,会随机生成一个城市的名称,并且在UI上显示出来。

        图1.ChangeNotifierProvider用法

1.创建模型类

 


网站公告

今日签到

点亮在社区的每一天
去签到