Flutter&鸿蒙next 状态管理高级使用:深入探讨 Provider

简介: Flutter&鸿蒙next 状态管理高级使用:深入探讨 Provider

写在前面
在 Flutter 开发中,状态管理是一个至关重要的主题。Flutter 提供了多种状态管理方案,其中 Provider 是最流行和灵活的选择之一。本文将深入探讨 Provider 的高级用法,以帮助开发者更好地理解和应用这一强大的状态管理工具。

一、Provider 概述
Provider 是一个 Flutter 插件,旨在简化状态管理。它通过依赖注入和通知机制,使得构建响应式应用变得更加容易。Provider 的核心理念是将数据和状态集中管理,并使这些数据能在不同的 Widget 树中共享。

二、Provider 的基本用法回顾
在开始高级用法之前,让我们回顾一下 Provider 的基本用法。

安装 Provider

在 pubspec.yaml 中添加依赖:

yaml

dependencies: flutter: sdk: flutter provider: ^6.0.0
创建一个模型类

创建一个简单的计数器模型:

import 'package:flutter/material.dart';

class Counter with ChangeNotifier {
int _count = 0;

int get count => _count;

void increment() {
_count++;
notifyListeners();
}
}
使用 Provider 提供状态

在 main.dart 中使用 Provider 包裹你的应用:

void main() {
runApp(
ChangeNotifierProvider(
create: (context) => Counter(),
child: MyApp(),
),
);
}
在 Widget 中消费状态

在需要的地方使用 Consumer 或 Provider.of 来获取状态:

class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Provider Example'),
),
body: Center(
child: Consumer(
builder: (context, counter, child) {
return Text('Count: ${counter.count}');
},
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
Provider.of(context, listen: false).increment();
},
child: Icon(Icons.add),
),
);
}
}

三、高级用法

  1. 组合多个 Provider
    在复杂的应用中,可能会有多个状态需要管理。Provider 允许你将多个 Provider 组合使用。

class User with ChangeNotifier {
String _name = '';

String get name => _name;

void updateName(String newName) {
_name = newName;
notifyListeners();
}
}

// 在 main.dart 中组合多个 Provider
void main() {
runApp(
MultiProvider(
providers: [
ChangeNotifierProvider(create: (context) => Counter()),
ChangeNotifierProvider(create: (context) => User()),
],
child: MyApp(),
),
);
}

通过 MultiProvider,你可以在同一个 Widget 树中使用多个状态。

  1. 使用 Provider 的 Selector
    当你只想监听某个模型的特定属性时,可以使用 Selector,这可以提高性能。

Selector(
selector: (context, counter) => counter.count,
builder: (context, count, child) {
return Text('Count: $count');
},
);
Selector 只会在选择的属性变化时重新构建,因此在某些情况下,可以减少不必要的 Widget 重建。

  1. 使用 ChangeNotifierProxyProvider
    当一个模型依赖于另一个模型时,可以使用 ChangeNotifierProxyProvider。这使得依赖关系管理变得更加清晰。

class AuthService with ChangeNotifier {
String _userId;

String get userId => _userId;

void login(String id) {
_userId = id;
notifyListeners();
}
}

class UserProfile with ChangeNotifier {
final AuthService authService;

UserProfile(this.authService);

String get profile => 'Profile for user: ${authService.userId}';
}

// 在 main.dart 中使用 ChangeNotifierProxyProvider
void main() {
runApp(
ChangeNotifierProvider(
create: (context) => AuthService(),
child: ChangeNotifierProxyProvider(
create: (context) => UserProfile(Provider.of(context, listen: false)),
update: (context, authService, userProfile) => UserProfile(authService),
child: MyApp(),
),
),
);
}

这样,UserProfile 就可以直接访问 AuthService 的状态。

  1. 自定义
目录
打赏
0
2
2
0
119
分享
相关文章
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
28 10
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
38 5
【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
28 2
【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
40 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
129 3
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
HarmonyOS NEXT开发-ArkUI六
本文介绍了颜色渐变(线性渐变和径向渐变)与阴影效果的应用,通过具体代码示例展示了如何在组件中实现这些视觉效果,帮助开发者提升界面美观度。君志所向,一往无前,欢迎一起探索! 简介字数:239
10 0
HarmonyOS NEXT开发-ArkUI六
HarmonyOS NEXT开发-ArkUI八
本文介绍了Harmony OS开发中的线性布局技巧,包括交叉轴对齐、自适应缩放及综合实践案例,帮助开发者轻松掌握相关技能。每天学习一个知识点,一起加油!
11 0
HarmonyOS NEXT开发-ArkUI八
HarmonyOS NEXT开发-ArkUI十二
网格布局(Grid)适用于由多行列组成的复杂界面,支持固定行列、合并单元格及滚动效果。其应用场景广泛,如文件管理、购物列表等。通过设置`columnsTemplate`和`rowsTemplate`可定义行列比例,使用`GridItem`组件实现内容展示。此外,还能通过自定义滚动条优化用户体验。代码示例展示了如何创建固定行列、合并单元格以及实现滚动效果的网格布局。 关注程序员Feri,了解更多实用技术与搞钱技巧,一起在编程道路上不断前行!
14 0
HarmonyOS NEXT开发-ArkUI十二
HarmonyOS NEXT开发-ArkUI十一
本文介绍Swiper组件,它用于滑动轮播显示,支持自动播放、纵向滑动、自定义导航点等特性。通过设置尺寸、内容及属性,可实现丰富的轮播效果。示例代码展示了基本用法和综合实践,帮助开发者快速上手。
17 0
HarmonyOS NEXT开发-ArkUI十一
HarmonyOS NEXT开发-ArkUI十
本文介绍了布局实践、定位(绝对与相对)、通用属性(多态样式和动画)及图形变换(平移、缩放、旋转),帮助开发者掌握前端布局技巧和交互效果优化。君志所向,一往无前!
18 0
HarmonyOS NEXT开发-ArkUI十

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    12
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    30
  • 3
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    2
  • 4
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
    16
  • 5
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
    8
  • 6
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    3
  • 7
    flutter3-wetrip跨平台自研仿携程app预约酒店系统模板
    27
  • 8
    通过外部链接启动 Flutter App(详细介绍及示例)
    14
  • 9
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
    23
  • 10
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    70
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等