news 2026/5/1 4:08:53

AttributeModifier与AttributeUpdater区别及源码使用DEMO

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
AttributeModifier与AttributeUpdater区别及源码使用DEMO

AttributeModifier与AttributeUpdater区别及源码使用DEMO

一、结论

鸿蒙ArkUI中AttributeModifier和AttributeUpdater均用于组件属性动态配置,核心差异在于更新机制与适用场景:

AttributeModifier是基础属性设置接口,主打多状态样式封装、共享UI样式、小批量属性更新,需绑定@State状态变量触发UI更新。

AttributeUpdater继承自AttributeModifier,主打属性直通更新、大批量属性修改、组件构造入参变更,可绕过@State机制直接触发UI更新,解决Modifier大批量修改的性能损耗问题。

二、代码实现和详细解释

1、通过基础示例分别实现AttributeModifier(多状态样式+小批量更新)和AttributeUpdater(直通更新+大批量修改+构造入参变更),直观对比两者的使用方式和更新机制。

import{AttributeUpdater}from'@ohos.arkui.modifier'/** * AttributeUpdater定义 */classMyButtonUpdateextendsAttributeUpdater<ButtonAttribute>{// 首次绑定时触发initializeModifier方法,进行属性初始化initializeModifier(instance:ButtonAttribute):void{instance.width('50%').height(30)}}/** * AttributeModifier定义 */classMyButtonModifierimplementsAttributeModifier<ButtonAttribute>{isDark:boolean=falseapplyNormalAttribute(instance:ButtonAttribute):void{if(this.isDark){instance.backgroundColor(Color.Blue)}else{instance.backgroundColor(Color.Red)}}}@Entry @Component struct Index{// AttributeUpdater 虽然继承于AttributeModifier需要使用,但是自带更新属性的能力update:MyButtonUpdate=newMyButtonUpdate();// AttributeModifier需要使用@State进行数据绑定,控件才能支持动态更新。// @State modifier: MyButtonModifier = new MyButtonModifier();build(){Row(){Column(){Button("Button")// .attributeModifier(this.modifier).attributeModifier(this.update).onClick(()=>{// this.modifier.isDark = !this.modifier.isDark// 通过attribute,直接修改组件属性,并立即触发组件属性更新this.update.attribute?.width('100%')
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/17 19:33:17

数据挖掘08

** 数据挖掘08——基于统计模型的序列数据挖掘 ** 一、概述 1.序列数据挖掘方法分类 &#xff08;1&#xff09;模式匹配 把未知量伸长或者缩短到参考模式的长度。 然后使用动态规划方法把被比较的数据扭曲或者弯折&#xff0c;时期特征与模型特征对齐。 比如&#xff1a;DTW &…

作者头像 李华
网站建设 2026/4/30 20:26:05

构建企业级体素可视化平台的5个关键架构设计

构建企业级体素可视化平台的5个关键架构设计 【免费下载链接】cesium An open-source JavaScript library for world-class 3D globes and maps :earth_americas: 项目地址: https://gitcode.com/GitHub_Trending/ce/cesium 工业可视化领域正面临前所未有的技术挑战&…

作者头像 李华
网站建设 2026/4/25 12:26:49

MiniCPM-V本地部署终极指南:3步完成零代码启动

你是否曾经遇到过这样的困境&#xff1f;想要体验最新AI多模态模型的强大功能&#xff0c;却被复杂的安装步骤和配置要求劝退&#xff1f;面对需要下载数十个依赖、配置各种环境变量的技术文档感到无从下手&#xff1f;今天&#xff0c;我们将彻底改变这一现状&#xff0c;通过…

作者头像 李华
网站建设 2026/4/10 6:53:28

如何打造专属媒体中心:Jellyfin跨平台部署终极指南

你是否曾经为了在不同设备上观看同一部电影而反复拷贝文件&#xff1f;是否希望建立一个属于自己的私人媒体库&#xff0c;随时随地享受高清影音&#xff1f;今天&#xff0c;我将带你一步步了解Jellyfin这个开源媒体服务器的部署方法&#xff0c;让你轻松拥有专属的媒体中心。…

作者头像 李华
网站建设 2026/4/29 2:15:01

本地大型语言模型部署革命:lemonade SDK深度解析

本地大型语言模型部署革命&#xff1a;lemonade SDK深度解析 【免费下载链接】lemonade Local LLM Server with NPU Acceleration 项目地址: https://gitcode.com/gh_mirrors/lemonade2/lemonade 还在为部署大型语言模型而头疼吗&#xff1f;复杂的配置、繁琐的环境搭建…

作者头像 李华
网站建设 2026/4/23 12:50:31

3000+品牌图标一键获取:Simple Icons完全使用指南

3000品牌图标一键获取&#xff1a;Simple Icons完全使用指南 【免费下载链接】simple-icons 项目地址: https://gitcode.com/gh_mirrors/sim/simple-icons 还在为项目中的品牌图标发愁吗&#xff1f;Simple Icons作为拥有3000开源品牌SVG图标的强大解决方案&#xff0c…

作者头像 李华