Flutter 鸿蒙next 中使用 MobX 进行状态管理
Flutter & 鸿蒙next 中使用 MobX 进行状态管理
在应用开发中,状态管理是一个至关重要的环节,特别是在复杂的Flutter或鸿蒙next项目中。状态的变化往往会影响UI的更新,因此,选择一种高效、灵活的状态管理工具显得尤为重要。MobX 作为一种响应式状态管理库,以其简洁的API和强大的功能,成为了Flutter和鸿蒙next开发中备受欢迎的选择。本文将详细介绍如何在Flutter和鸿蒙next中使用MobX进行状态管理。
一、MobX 简介
MobX 是一个强大的状态管理库,它采用响应式编程的思想,通过追踪依赖关系,在状态发生变化时自动更新UI。MobX 的核心理念是“反应式状态管理”,即状态的变化会自动触发依赖该状态的组件重新渲染。这使得开发者可以专注于状态的管理,而不需要手动控制UI的更新。
MobX 提供了几个核心概念:
- Observable(可观察对象):任何可以被MobX追踪其变化的JavaScript对象或值。
- Action(动作):修改状态的方法,通常用于响应用户事件或副作用。
- Reaction(反应):当状态发生变化时,自动执行的一段代码,如重新渲染UI。
- Computed(计算属性):基于其他状态派生出的新状态,当依赖的状态变化时,计算属性会自动重新计算。
二、在Flutter中使用MobX
Flutter是一个用于构建跨平台移动应用程序的UI工具包,它允许开发者使用Dart语言编写代码。在Flutter中,MobX状态管理库通过flutter_mobx和mobx两个包来实现。
1. 添加依赖
首先,需要在pubspec.yaml文件中添加flutter_mobx和mobx的依赖:
dependencies:flutter:sdk: fluttermobx: ^0.3.9+3flutter_mobx: ^0.3.3+3dev_dependencies:build_runner: ^1.7.1mobx_codegen: ^0.3.10+1
然后,运行flutter pub get命令来下载这些依赖。
2. 创建可观察对象
接下来,需要创建一个可观察对象。这通常是一个包含状态的类,并使用@observable装饰器来标记其状态属性。同时,使用@action装饰器来标记修改状态的方法。
例如,创建一个简单的计数器模型:
import 'package:mobx/mobx.dart';
part 'counter.g.dart';class Counter = CounterMobx with _$Counter;abstract class CounterMobx with Store {int value = 0;void increment() {value++;}void decrement() {value--;}void set(int value) {this.value = value;}
}
注意,这里使用了part 'counter.g.dart';语法,这是MobX代码生成的一部分。接下来,需要运行代码生成命令来生成counter.g.dart文件:
flutter packages pub run build_runner build
3. 在页面中使用MobX
现在,可以在Flutter页面中使用这个计数器模型了。使用Observer组件来观察状态的变化,并自动更新UI。
import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:mobx/mobx.dart';
import 'counter.dart';class CounterPage extends StatelessWidget {Widget build(BuildContext context) {final Counter counter = Counter();return MaterialApp(title: 'Mobx Counter',theme: ThemeData(primaryColor: Colors.blue),home: Scaffold(appBar: AppBar(title: Text('Mobx Counter'),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('You have pushed the button this many times:'),Observer(builder: (_) => Text('${counter.value}',style: Theme.of(context).textTheme.display1,),),],),),floatingActionButton: Column(crossAxisAlignment: CrossAxisAlignment.end,mainAxisAlignment: MainAxisAlignment.end,children: <Widget>[Padding(padding: EdgeInsets.symmetric(vertical: 5.0),child: FloatingActionButton(onPressed: counter.increment,tooltip: 'Increment',child: Icon(Icons.add),),),Padding(padding: EdgeInsets.symmetric(vertical: 5.0),child: FloatingActionButton(onPressed: counter.decrement,tooltip: 'Decrement',child: Icon(Icons.remove),),),],),),);}
}
在这个例子中,Observer组件包裹了显示计数器值的Text组件。当counter.value发生变化时,Observer会自动触发UI的重新渲染。
三、在鸿蒙next中使用MobX(概念性探讨)
虽然鸿蒙next(HarmonyOS)和Flutter在技术上有所不同,但状态管理的核心思想是一致的。在鸿蒙next中,虽然没有直接的MobX库,但可以通过类似的概念和工具来实现响应式状态管理。
鸿蒙next提供了自己的状态管理机制,如状态装饰器(@State、@Provide、@Consume等)。这些装饰器允许开发者在组件内部和组件之间共享和管理状态。然而,与MobX相比,鸿蒙next的原生状态管理机制可能不够灵活和强大。因此,在鸿蒙next项目中,开发者可能会考虑使用类似MobX的第三方库,或者借鉴MobX的响应式编程思想来构建自己的状态管理解决方案。
1. 状态装饰器
鸿蒙next中的状态装饰器提供了一种简单的方式来管理组件内的状态。例如,@State装饰器用于标记组件内的状态变量,当这些变量发生变化时,组件会重新渲染。
@State stateCount: number = 0;increment() {this.stateCount++;
}
在这个例子中,stateCount是一个被@State装饰的状态变量。当increment方法被调用时,stateCount的值会增加,并且使用这个状态的UI部分会自动重新渲染。
2. 全局状态管理
在鸿蒙next中,可以通过@ProvideGlobal和@ConsumeGlobal装饰器来实现全局状态的管理。这些装饰器允许开发者在应用的全局范围内提供一个状态,并允许任何组件访问和消费这个状态。
@ProvideGlobal appTheme: string = "light";updateTheme() {this.appTheme = "dark";
}
在其他组件中,可以使用@ConsumeGlobal装饰器来访问这个全局状态。
@ConsumeGlobal appTheme: string;
虽然这些装饰器提供了一种简单的方式来管理全局状态,但它们可能不够灵活,无法满足复杂应用的需求。在这种情况下,开发者可能会考虑使用类似MobX的第三方库,或者构建自己的响应式状态管理解决方案。
3. 响应式编程思想
无论使用哪种状态管理工具或库,响应式编程的思想都是相通的。在鸿蒙next中,开发者可以借鉴MobX的响应式编程思想来构建自己的状态管理解决方案。这包括:
- 状态集中管理:将状态集中在一个地方进行管理,而不是分散在多个组件中。
- 依赖追踪:追踪状态的变化和依赖关系,以便在状态发生变化时自动更新UI。
- 计算属性:基于其他状态派生出新的状态,当依赖的状态变化时,计算属性会自动重新计算。
通过借鉴这些思想,开发者可以在鸿蒙next中构建出高效、灵活的状态管理解决方案。
四、总结
MobX作为一种强大的响应式状态管理库,在Flutter和鸿蒙next中都得到了广泛的应用。在Flutter中,通过flutter_mobx和mobx包,开发者可以轻松实现状态的管理和UI的自动更新。而在鸿蒙next中,虽然没有直接的MobX库,但开发者可以借鉴MobX的响应式编程思想来构建自己的状态管理解决方案。无论使用哪种工具或库,理解状态管理的核心思想都是至关重要的。通过合理管理状态,开发者可以构建出高效、灵活、易于维护的移动应用程序。
相关文章:
Flutter 鸿蒙next 中使用 MobX 进行状态管理
Flutter & 鸿蒙next 中使用 MobX 进行状态管理 在应用开发中,状态管理是一个至关重要的环节,特别是在复杂的Flutter或鸿蒙next项目中。状态的变化往往会影响UI的更新,因此,选择一种高效、灵活的状态管理工具显得尤为重要。Mo…...
1.62亿元!812个项目立项!上海市2024年度“科技创新行动计划”自然科学基金项目立项
本期精选SCI&EI ●IEEE 1区TOP 计算机类(含CCF); ●EI快刊:最快1周录用! 知网(CNKI)、谷歌学术期刊 ●7天录用-检索(100%录用),1周上线; 免费稿件评估 免费匹配期…...
Redis数据库测试和缓存穿透、雪崩、击穿
Redis数据库测试实验 实验要求 1.新建一张user表,在表内插入10000条数据。 2.①通过jdbc查询这10000条数据,记录查询时间。 ②通过redis查询这10000条数据,记录查询时间。 3.①再次查询这一万条数据,要求根据年龄进行排序&#…...
[vulnhub] DarkHole: 2
https://www.vulnhub.com/entry/darkhole-2,740/ 端口扫描主机发现 探测存活主机,185是靶机 # nmap -sP 192.168.75.0/24 Starting Nmap 7.94SVN ( https://nmap.org ) at 2024-11-08 18:02 CST Nmap scan report for 192.168.75.1 Host is up (0.…...
《XGBoost算法的原理推导》12-2 t轮迭代中对样本i的预测值 公式解析
本文是将文章《XGBoost算法的原理推导》中的公式单独拿出来做一个详细的解析,便于初学者更好的理解。 好的,公式(12-2)表示的是 XGBoost 在第 t t t 轮迭代中对样本 i i i 的预测值。它说明了在第 t t t 轮迭代中,模型的预测是通过累加之前…...
./bin/mindieservice_daemon启动成功
接MindIE大模型测试及报错Fatal Python error: PyThreadState_Get: the function must be called with the GIL held,-CSDN博客经过调整如下红色部分参数,昇腾310P3跑起来了7b模型: rootdev-8242526b-01f2-4a54-b89d-f6d9c57c692d-qjhpf:/home/apulis-de…...
Linux: network: ip link M-DOWN的具体含义是什么?
文章目录 参考简介实例代码解释openstack上的显示如果是在一个interface上建立了vlan参考 https://unix.stackexchange.com/questions/348327/using-ip-what-does-m-down-mean www.policyrouting.org/iproute2.doc.html#ss9.1 简介 是指上一级的接口的状态。 实例 4: ersp…...
Spring中的过滤器和拦截器
Spring中的过滤器和拦截器 一、引言 在Spring框架中,过滤器(Filter)和拦截器(Interceptor)是实现请求处理的两种重要机制。它们都基于AOP(面向切面编程)思想,用于在请求的生命周期…...
leetcode20.括号匹配
题目描述 给定一个只包括 ‘(’,‘)’,‘{’,‘}’,‘[’,‘]’ 的字符串 s ,判断字符串是否有效。 有效字符串需满足: 左括号必须用相同类型的右括号闭合。 左括号必须以正确的顺序闭合。 每个…...
Unity性能优化-具体操作
批量渲染是通过减少CPU向GPU发送渲染命令(DrawCall)的次数,以及减少GPU切换渲染状态的次数,尽量让GPU一次多做一些事情,来提升逻辑线和渲染线的整体效率。 Draw Call性能消耗原因是命令从Runtime到Driver的过程中&…...
【嵌入式开发——ARM】1ARM架构
嵌入式领域,使用ARM架构的芯片公司可不占少数吧,intel的x86架构主要占据PC、服务器市场,ARM架构主要占据移动市场。x86架构和ARM架构不同的主要原因,是背后使用的计算机指令集不同。计算机有自己的语言系统(汇编&#…...
Linux中.NET读取excel组件,不会出现The type initializer for ‘Gdip‘ threw an exception异常
组件,可通过nuget安装,直接搜名字: ExcelDataReader using ConsoleAppReadFileData.Model; using ExcelDataReader; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Task…...
mmclassification的配置文件样本
# 需要修改的参数 img_size 480 class_name [fuqi,ok] num_classes len(class_name) data_root /home/apulis-test/teamdata/yz_dataset/fuqi max_epochs300 val_interval1 train_batch_size 16 val_batch_size 1 load_from "swin_tiny_224_b16x64_300e_imagenet_…...
Java基础——类和对象的定义链表的创建,输出
目录 什么是类? 什么是对象? 如何创建链表? 尾插法: 头插法: 输出链表的长度 输出链表的值 什么是类? 创建Java程序必须创建一个类class. .java程序需要经过javac指令将文件翻译为.class字节码文件,…...
Linux应用项目之量产工具(一)——显示系统
目录 前言 项目特点及介绍 ① 简单易用 ② 软件可配置、易扩展 ③ 纯 C 语言编程 软件总框架 显示系统 1.数据结构抽象 disp_manager.h 2.Framebuffer编程 framebuffer.c 3.显示管理 disp_manager.c 4.单元测试 disp_test.c 顶层目录Makefile 顶层目录Makefil…...
Python小白学习教程从入门到入坑------第二十九课 访问模式(语法进阶)
目录 一、访问模式 1.1 r 1.2 w 1.3 1.3.1 r 1.3.2 w 1.3.3 a 1.4 a 一、访问模式 模式可做操作若文件不存在是否覆盖r只能读报错-r可读可写报错是w只能写创建是w可读可写创建是a只能写创建否,追加写a可读可写创建否,追加写 1.1 r r&…...
使用 PageHelper 在 Spring Boot 项目中实现分页查询
目录 前言1. 项目环境配置1.1 添加 PageHelper 依赖1.2 数据库和 MyBatis 配置 2. 统一的分页响应类3. 使用 PageHelper 实现分页查询3.1 Service 层分页查询实现3.2 PageHelper 分页注意事项 4. 控制层调用示例5. 常见问题与解决方案5.1 java.util.ArrayList cannot be cast t…...
深度学习-张量相关
一. 张量的创建 张量简介 张量是pytorch的基本数据结构 张量,英文为Tensor,是机器学习的基本构建模块,是以数字方式表示数据的形式。 例如,图像可以表示为形状为 [3, 224, 224] 的张量,这意味着 [colour_channels, h…...
电脑提示xinput1_3.dll丢失怎么解决,分享6种有效的解决方法
xinput1_3.dll 是一个动态链接库(DLL)文件,它在Windows操作系统中扮演着重要的角色,特别是在处理游戏控制器和其他输入设备的交互方面。这个文件是Microsoft DirectX软件包的一部分,DirectX是微软公司开发的一个多媒体…...
【计网】数据链路层笔记
【计网】数据链路层 数据链路层概述 数据链路层在网络体系结构中所处的地位 链路、数据链路和帧 链路(Link)是指从一个节点到相邻节点的一段物理线路(有线或无线),而中间没有任何其他的交换节点。 数据链路(Data Link)是基于链路的。当在一条链路上传送数据时&a…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
生成 Git SSH 证书
🔑 1. 生成 SSH 密钥对 在终端(Windows 使用 Git Bash,Mac/Linux 使用 Terminal)执行命令: ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明: -t rsa&#x…...
Spring AI 入门:Java 开发者的生成式 AI 实践之路
一、Spring AI 简介 在人工智能技术快速迭代的今天,Spring AI 作为 Spring 生态系统的新生力量,正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务(如 OpenAI、Anthropic)的无缝对接&…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章,二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑: 🔄 一、起源与初创期:Swagger的诞生(2010-2014) 核心…...
腾讯云V3签名
想要接入腾讯云的Api,必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口,但总是卡在签名这一步,最后放弃选择SDK,这次终于自己代码实现。 可能腾讯云翻新了接口文档,现在阅读起来,清晰了很多&…...
第7篇:中间件全链路监控与 SQL 性能分析实践
7.1 章节导读 在构建数据库中间件的过程中,可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中,必须做到: 🔍 追踪每一条 SQL 的生命周期(从入口到数据库执行)&#…...
Qt 事件处理中 return 的深入解析
Qt 事件处理中 return 的深入解析 在 Qt 事件处理中,return 语句的使用是另一个关键概念,它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别:不同层级的事件处理 方…...
QT开发技术【ffmpeg + QAudioOutput】音乐播放器
一、 介绍 使用ffmpeg 4.2.2 在数字化浪潮席卷全球的当下,音视频内容犹如璀璨繁星,点亮了人们的生活与工作。从短视频平台上令人捧腹的搞笑视频,到在线课堂中知识渊博的专家授课,再到影视平台上扣人心弦的高清大片,音…...
CSS 工具对比:UnoCSS vs Tailwind CSS,谁是你的菜?
在现代前端开发中,Utility-First (功能优先) CSS 框架已经成为主流。其中,Tailwind CSS 无疑是市场的领导者和标杆。然而,一个名为 UnoCSS 的新星正以其惊人的性能和极致的灵活性迅速崛起。 这篇文章将深入探讨这两款工具的核心理念、技术差…...
Excel 怎么让透视表以正常Excel表格形式显示
目录 1、创建数据透视表 2、设计 》报表布局 》以表格形式显示 3、设计 》分类汇总 》不显示分类汇总 1、创建数据透视表 2、设计 》报表布局 》以表格形式显示 3、设计 》分类汇总 》不显示分类汇总...
