ArkTS学习笔记_UI界面的状态管理简述

ArkTS学习笔记_UI界面的状态管理简述

  • 背景:
    我们在UI开发中,绝大多数的UI界面都是动态的、有用户交互的,为了实现动态交互,引入了一个概念“状态”,它主要是用来记录管理UI界面的状态变化(数据变化)。
  • 作用:
    在UI开发中,UI是应用程序运行的结果,开发者构建的UI界面,在应用程序运行时,状态是UI的参数。当参数改变时,UI作为结果,也将进行对应的改变。运行时的所有状态的变化,都会让UI进行重新渲染,在ArkUI中统称为状态管理机制。

一、UI与状态的映射关系

  • View(UI): UI渲染,指将build方法内的UI描述和@Builder装饰的方法内的UI描述映射到界面。
  • State: 状态,指驱动UI更新的数据。用户通过触发组件的事件方法,改变状态数据。状态数据的改变,引起UI的重新渲染。
    请添加图片描述

二、自定义组件中的变量

  • 状态变量: 被状态装饰器装饰的变量,状态变量值的改变会引起UI的渲染更新。
  • 常规变量: 没有被状态装饰器装饰的变量,通常应用于辅助计算。它的改变永远不会引起UI的刷新。
@Component
struct MyComponent {
  @State count: number = 0; // 状态变量
  private increaseBy: number = 1; // 常规变量

  build() {
  }
}

三、状态变量的初始化

  • 数据源/同步源: 状态变量的原始来源,可以同步给不同的状态数据。通常意义为父组件传给子组件的数据。
  • 命名参数机制: 父组件通过指定参数传递给子组件的状态变量,为父子传递同步参数的主要手段。
  • 从父组件初始化: 父组件使用命名参数机制,将指定参数传递给子组件。子组件初始化的默认值在有父组件传值的情况下,会被覆盖。
  • 初始化子节点: 父组件中状态变量可以传递给子组件,初始化子组件对应的状态变量。
  • 本地初始化: 在变量声明的时候赋值,作为变量的默认值。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/802018.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

08 模型演化根本 深度学习推荐算法的五大范式

易经》“九三:君于终日乾乾;夕惕若,厉无咎”。九三是指阳爻在卦中处于第三位,已经到达中位,惕龙指这个阶段逐渐理性,德才已经显现,会引人注目;但要反思自己的不足,努力不…

ubuntu上模拟串口通信

前言 有时候写了一些串口相关的程序,需要调试的时候,又没有硬件,或者需要等其他模块完成才能一起联调。这样搭建环境费时费力,很多问题等到最后联调才发现就已经很晚了。 本文提供一种在ubuntu环境下模拟串口,直接就可…

django报错(一):python manage.py makemigrations,显示“No changes detected”

执行python manage.py makemigrations命令无任何文件生成,结果显示“No changes detected”。 解决方案一: 1、执行命令:python manage.py makemigrations –empty appname 2、删除其中的0001_initial.py文件(因为这个文件内容是…

vue2+antd实现表格合并;excel效果

效果图 一、html <template><div><a-table :columns"columns" :dataSource"dataSource" rowKey"id" :pagination"false" bordered><template slot"content1" slot-scope"text">{{text}}…

单臂路由组网实验,单臂路由的定义、适用情况、作用

一、定义 单臂路由是指通过在路由器的一个接口上配置许多子接口,从而实现原来相互隔离的不同VLAN之间的互通。 子接口:把路由器上的实际的物理接口划分为多个逻辑上的接口,这些被划分的逻辑接口就是子接口。 二、适用情况 用在没有三层交换机,却要实现不同VLAN之间的互…

element ui中el-form-item的属性rules的用法

目录 el-form-item的属性rules的用法 栗子 总结 实践应用 一、 定义静态的校验规则 二、定义动态的校验规则 el-form-item的属性rules的用法 在学习element ui 的Form表单组件时&#xff0c;学到el-form-item也有rules属性&#xff0c;但是对应这个属性如何使用&#x…

【linux】服务器安装及卸载pycharm社区版教程

【linux】服务器安装及卸载pycharm社区版教程 【创作不易&#xff0c;求点赞关注收藏】 文章目录 【linux】服务器安装及卸载pycharm社区版教程1、到官网下载安装包2、通过终端wget下载安装包3、解压4、安装5、设置环境变量6、运行pycharm7、删除pycharm安装包、卸载pycharm …

前端JS特效第34集:jQuery俩张图片局部放大预览插件

jQuery俩张图片局部放大预览插件&#xff0c;先来看看效果&#xff1a; 部分核心的代码如下(全部代码在文章末尾)&#xff1a; <!DOCTYPE html> <html lang"zh"> <head> <meta charset"UTF-8"> <meta http-equiv"X-UA-Co…

大数据环境下的房地产数据分析与预测研究的设计与实现

1绪论 1.1研究背景及意义 随着经济的快速发展和城市化进程的推进&#xff0c;房地产市场成为了国民经济的重要组成部分。在中国&#xff0c;房地产行业对经济增长、就业创造和资本投资起到了重要的支撑作用。作为中国西南地区的重要城市&#xff0c;昆明的房地产市场也备受关…

新版本 idea 创建不了 spring boot 2 【没有jkd8选项】

创建新项目 将地址换成如下 https://start.aliyun.com/

VmWare虚拟机开启wordpress服务并通过服务器内网穿透访问

目录 Ubuntu安装LAMP环境Ubuntu安装wordpress内网穿透服务端客户端 部分问题记录浏览器访问8000端口始终重定向到80端口修改站点url后wordpress无法登陆 曾经在阿里云的服务器上开了个wordpress服务作为个人博客&#xff0c;后来因为域名和服务器续费变贵没有继续续费&#xff…

【螺旋矩阵 II】python刷题记录

本来想着根据上一篇文章中大佬的思路来顺时针转转来改代码&#xff0c;想了一天没搞出来 http://t.csdnimg.cn/7sM8g 于是看了代码随想录的视频 一入循环深似海 | LeetCode&#xff1a;59.螺旋矩阵II_哔哩哔哩_bilibili 总结一下&#xff1a; 模拟的思路&#xff0c;每一圈…

解读|http和https的区别,谁更好用

在日常我们浏览网页时&#xff0c;有些网站会看到www前面是http&#xff0c;有些是https&#xff0c;这两种有什么区别呢&#xff1f;为什么单单多了“s”&#xff0c;会有人说这个网页会更安全些&#xff1f; HTTP&#xff08;超文本传输协议&#xff09;和HTTPS&#xff08;…

筑牢安全防线,促进企业稳定成长

注重技术创新与产业升级&#xff0c;还要高度重视安全管理与可持续发展&#xff0c;才能确保产业园区内企业能够在安全、稳定的环境中持续成长&#xff0c;并为社会和环境做出贡献。 强化安全管理 1、智能化安保系统&#xff1a; 园区采用智能化管理系统&#xff0c;实现对物…

顶顶通呼叫中心中间件-被叫路由、目的地绑定(mod_cti基于FreeSWITCH)

顶顶通呼叫中心中间件-被叫路由、目的地绑定(mod_cti基于FreeSWITCH) 1、配置分机 点击分机 -> 找到你需要设置的分机 ->呼叫路由设置为external&#xff0c;这里需要设置的分机是呼叫的并不是坐席的分机呼叫路由 2、配置拨号方案 点击拨号方案 -> 输入目的地绑定 …

(02)Unity使用在线AI大模型(调用Python)

目录 一、概要 二、改造Python代码 三、制作Unity场景 一、概要 查看本文需完成&#xff08;01&#xff09;Unity使用在线AI大模型&#xff08;使用百度千帆服务&#xff09;的阅读和实操&#xff0c;本文档接入指南的基础上使用Unity C#调用百度千帆大模型&#xff0c;需要…

部署指南

部署指南 https://support.huawei.com/enterprise/zh/doc/EDOC1100368575/e64f745b 总体原则 园区网络作为网络基础设施&#xff0c;为用户提供网络通信服务和访问资源权限&#xff0c;其复杂多样的访问关系以及多种多样的业务类型必然要求园区网的设计要有良好的 设计原则。…

Ubuntu22 Qt6.6 ROS 环境搭建

Ubuntu22.04; Qt6.6; Qt Creator 13.01; ROS2 1. 安装 Qt ROS 插件 1.下载地址&#xff1a; https://github.com/ros-industrial/ros_qtc_plugin/releases 选择对应 Qt Creator 版本的安装包。 2. Qt Creator中&#xff0c;“Help - 关于插件”–>“install Plugin…

Docker容器——初识Docker,安装以及了解操作命令

一、Docker是什么? 是一个开源的应用容器引擎&#xff0c;基于go语言开发并遵循了apache2.0协议开源&#xff0c;用来管理容器和镜像的工具是在Linux容器里驱动运行应用的开源工具是一种轻量级的“虚拟机” 基于linux内核运行Docker的容器技术可以在一台主机上轻松为任何应用…

Win10+Docker配置TensorRT环境

1.Docker下载和安装 Docker下载:Install Docker Desktop on Windows Docker安装: 勾选直接下一步就行,安装完成后需要电脑重启。 重启后,选择Accept—>Continue without signing in—>skip survey. 可以进入下面页面,并且左下角是绿色的,显示e…