当前位置: 首页 > news >正文

Flutter 鸿蒙next 中使用 MobX 进行状态管理

Flutter & 鸿蒙next 中使用 MobX 进行状态管理

在应用开发中,状态管理是一个至关重要的环节,特别是在复杂的Flutter或鸿蒙next项目中。状态的变化往往会影响UI的更新,因此,选择一种高效、灵活的状态管理工具显得尤为重要。MobX 作为一种响应式状态管理库,以其简洁的API和强大的功能,成为了Flutter和鸿蒙next开发中备受欢迎的选择。本文将详细介绍如何在Flutter和鸿蒙next中使用MobX进行状态管理。

一、MobX 简介

MobX 是一个强大的状态管理库,它采用响应式编程的思想,通过追踪依赖关系,在状态发生变化时自动更新UI。MobX 的核心理念是“反应式状态管理”,即状态的变化会自动触发依赖该状态的组件重新渲染。这使得开发者可以专注于状态的管理,而不需要手动控制UI的更新。

MobX 提供了几个核心概念:

  1. Observable(可观察对象):任何可以被MobX追踪其变化的JavaScript对象或值。
  2. Action(动作):修改状态的方法,通常用于响应用户事件或副作用。
  3. Reaction(反应):当状态发生变化时,自动执行的一段代码,如重新渲染UI。
  4. 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 进行状态管理 在应用开发中&#xff0c;状态管理是一个至关重要的环节&#xff0c;特别是在复杂的Flutter或鸿蒙next项目中。状态的变化往往会影响UI的更新&#xff0c;因此&#xff0c;选择一种高效、灵活的状态管理工具显得尤为重要。Mo…...

1.62亿元!812个项目立项!上海市2024年度“科技创新行动计划”自然科学基金项目立项

本期精选SCI&EI ●IEEE 1区TOP 计算机类&#xff08;含CCF&#xff09;&#xff1b; ●EI快刊&#xff1a;最快1周录用&#xff01; 知网(CNKI)、谷歌学术期刊 ●7天录用-检索&#xff08;100%录用&#xff09;&#xff0c;1周上线&#xff1b; 免费稿件评估 免费匹配期…...

Redis数据库测试和缓存穿透、雪崩、击穿

Redis数据库测试实验 实验要求 1.新建一张user表&#xff0c;在表内插入10000条数据。 2.①通过jdbc查询这10000条数据&#xff0c;记录查询时间。 ②通过redis查询这10000条数据&#xff0c;记录查询时间。 3.①再次查询这一万条数据&#xff0c;要求根据年龄进行排序&#…...

[vulnhub] DarkHole: 2

https://www.vulnhub.com/entry/darkhole-2,740/ 端口扫描主机发现 探测存活主机&#xff0c;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算法的原理推导》中的公式单独拿出来做一个详细的解析&#xff0c;便于初学者更好的理解。 好的&#xff0c;公式(12-2)表示的是 XGBoost 在第 t t t 轮迭代中对样本 i i i 的预测值。它说明了在第 t t t 轮迭代中&#xff0c;模型的预测是通过累加之前…...

./bin/mindieservice_daemon启动成功

接MindIE大模型测试及报错Fatal Python error: PyThreadState_Get: the function must be called with the GIL held,-CSDN博客经过调整如下红色部分参数&#xff0c;昇腾310P3跑起来了7b模型&#xff1a; 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框架中&#xff0c;过滤器&#xff08;Filter&#xff09;和拦截器&#xff08;Interceptor&#xff09;是实现请求处理的两种重要机制。它们都基于AOP&#xff08;面向切面编程&#xff09;思想&#xff0c;用于在请求的生命周期…...

leetcode20.括号匹配

题目描述 给定一个只包括 ‘(’&#xff0c;‘)’&#xff0c;‘{’&#xff0c;‘}’&#xff0c;‘[’&#xff0c;‘]’ 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。 左括号必须以正确的顺序闭合。 每个…...

Unity性能优化-具体操作

批量渲染是通过减少CPU向GPU发送渲染命令&#xff08;DrawCall&#xff09;的次数&#xff0c;以及减少GPU切换渲染状态的次数&#xff0c;尽量让GPU一次多做一些事情&#xff0c;来提升逻辑线和渲染线的整体效率。 Draw Call性能消耗原因是命令从Runtime到Driver的过程中&…...

【嵌入式开发——ARM】1ARM架构

嵌入式领域&#xff0c;使用ARM架构的芯片公司可不占少数吧&#xff0c;intel的x86架构主要占据PC、服务器市场&#xff0c;ARM架构主要占据移动市场。x86架构和ARM架构不同的主要原因&#xff0c;是背后使用的计算机指令集不同。计算机有自己的语言系统&#xff08;汇编&#…...

Linux中.NET读取excel组件,不会出现The type initializer for ‘Gdip‘ threw an exception异常

组件&#xff0c;可通过nuget安装&#xff0c;直接搜名字&#xff1a; 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基础——类和对象的定义链表的创建,输出

目录 什么是类&#xff1f; 什么是对象? 如何创建链表&#xff1f; 尾插法&#xff1a; 头插法&#xff1a; 输出链表的长度 输出链表的值 什么是类&#xff1f; 创建Java程序必须创建一个类class. .java程序需要经过javac指令将文件翻译为.class字节码文件&#xff0c…...

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只能写创建否&#xff0c;追加写a可读可写创建否&#xff0c;追加写 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的基本数据结构 张量&#xff0c;英文为Tensor&#xff0c;是机器学习的基本构建模块&#xff0c;是以数字方式表示数据的形式。 例如&#xff0c;图像可以表示为形状为 [3, 224, 224] 的张量&#xff0c;这意味着 [colour_channels, h…...

电脑提示xinput1_3.dll丢失怎么解决,分享6种有效的解决方法

xinput1_3.dll 是一个动态链接库&#xff08;DLL&#xff09;文件&#xff0c;它在Windows操作系统中扮演着重要的角色&#xff0c;特别是在处理游戏控制器和其他输入设备的交互方面。这个文件是Microsoft DirectX软件包的一部分&#xff0c;DirectX是微软公司开发的一个多媒体…...

【计网】数据链路层笔记

【计网】数据链路层 数据链路层概述 数据链路层在网络体系结构中所处的地位 链路、数据链路和帧 链路(Link)是指从一个节点到相邻节点的一段物理线路(有线或无线)&#xff0c;而中间没有任何其他的交换节点。 数据链路(Data Link)是基于链路的。当在一条链路上传送数据时&a…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

跨链模式:多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

让AI看见世界:MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

苹果AI眼镜:从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中,苹果AI眼镜(Apple Glasses)正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch,而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠,而在于如何通过形态设计打破社交壁垒,成为用户“全天佩戴…...

Docker拉取MySQL后数据库连接失败的解决方案

在使用Docker部署MySQL时&#xff0c;拉取并启动容器后&#xff0c;有时可能会遇到数据库连接失败的问题。这种问题可能由多种原因导致&#xff0c;包括配置错误、网络设置问题、权限问题等。本文将分析可能的原因&#xff0c;并提供解决方案。 一、确认MySQL容器的运行状态 …...

CTF show 数学不及格

拿到题目先查一下壳&#xff0c;看一下信息 发现是一个ELF文件&#xff0c;64位的 ​ 用IDA Pro 64 打开这个文件 ​ 然后点击F5进行伪代码转换 可以看到有五个if判断&#xff0c;第一个argc ! 5这个判断并没有起太大作用&#xff0c;主要是下面四个if判断 ​ 根据题目…...

基于stm32F10x 系列微控制器的智能电子琴(附完整项目源码、详细接线及讲解视频)

注&#xff1a;文章末尾网盘链接中自取成品使用演示视频、项目源码、项目文档 所用硬件&#xff1a;STM32F103C8T6、无源蜂鸣器、44矩阵键盘、flash存储模块、OLED显示屏、RGB三色灯、面包板、杜邦线、usb转ttl串口 stm32f103c8t6 面包板 …...