ArkTS组件结构和状态管理

1. 认识基本的组件结构

image-20241104180316251

image-20241119100749116

ArkTS通过装饰器@Component 和@Entry 装饰 struct 关键字声明的数据结构，构成一个自定义组件
自定义组件中提供了一个build函数，开发者需要在函数内以链式调用的方式进行基本的UI描述，UI描述的方法请参考UI描述规范
  • srtuct-自定义组件基于struct实现

要想实现一段UI描述，必须使用struct关键字来声明-注意不能有继承关系-组件名不能与系统组件名相同

@Component
struct Index{}
@CustomDialog
struct Index2{}

Component修饰符
Component装饰器只能修饰struct关键字声明的结构，被修饰后的struc具备组件的{描述（渲染）能力}的描述
自定义组件就是Conponent修饰了一段struct结构体，里面有一段build函数，里面是写uI的
快速生成自定义组件：comp+回车
  • build函数

用于定义组件的UI描述，一个struct结构必须实现build函数

@Component
struct  {build() {}
}
  1. build函数是组件（Component)必须提供以实现的一个函数，build函数可以没有内容，如果有的话，必须有且一个容器组件（可以防止子组件的组件）-只有entry里面有限制-component的组件可以放没有子组件的组件
  2. 常见的容器组件-Flex-Column-Row-List-Grid-Panel
  • entry修饰符

entry将自定义组件定义为UI页面的入口，也就是我们原来前端常说的一个页面，最多可以使用entry修饰

一个自定义组件（在一个ets文件中）-如下面的代码是不允许的

entry修饰的组件，最终会被注册，具体文件位置-main/resources/base/profile/main_pages.json
自动注册-新建组件时，采用新建Page的方式
手动注册-新建一个ets文件，自己在main_pages.json中手动添加路径
注意：如果你手动删除了某一个带entry的组件，你需要手动去main_page中去删除该路径，否则编译器会报错

2.组件调用

通过属性方法配置组件属性，以“.”链式调用的方式配置组件的样式和其他属性

根据组件构造方法的不同，组件的调用有两种方式

  1. 有参数

    • image-20241119103708428

  2. 无参数

    • image-20241119103737023
     Divider().color(Color.White)

3.某些组件方法

  1. 设置主轴对齐
.justifyContent(FlexAlign.Center)
  1. 给分隔线设置宽度
.strokeWidth(5)//stoke width  笔画宽度

4. 装饰器

装饰器作用：装饰类、结构体等使其拥有新能力

标志：带上@符号的

  1. @Entry 入口装饰器
一个页面只能有一个入口

  1. @Component 可复用组件

  2. 数据绑定装饰器 -State

  • State装饰器的变量是组件内部的状态变量、数据改变触发组件所在的build方法刷新UI
举个例子来说，当我们点击某个butto按钮时，触发点击点击事件，如果我们定义普通的变量，而不加@State修饰，当数据改变时，数据改变触发组件所在build方法刷新UI的重新渲染，在ArkUI中统称为状态管理机制。通过状态管理机制可以构建一个动态

下面案例会具体指出

  1. @Prop - 单项数据传输器
  2. @Link - 双向数据传输器
  3. @Watch - 状态变化监听
  4. @StorageProp(key)：这个装饰器可能用于标记一个属性（property），表示这个属性应该被存储在某种形式的存储介质中（如数据库、本地存储等）
  5. @StorageLink(key)：这个装饰器可能用于标记一个方法或属性，表示它与存储介质中的某个数据项或集合有关联。

5.声明式UI - 事件配置

. 事件方法设置组件事件的响应逻辑，以“.”链式调用的方式配置系统组件支持的事件

  1. 匿名函数配置事件方法

使用“（）=>{…} “,以确保函数与组件绑定，同时符合ArkTS语法规范

  Button("-").onClick(() =>{//箭头函数this.count--})
  1. 成员函数配置事件方法

组件内部定义的事件方法

myClickHandler():void {this.counter += 2;
}
...build() {Button('add counter').onClick(this.myClickHandler.bimd(this))
}

6.案例练习

实现简单计数器（华为实训平台）

@Entry
@Component
struct DrinkWater {@State count: number = 0// count:number = 0build() {Row() {Column() {Text("简易计数器")//颜色显示方法：对象.属性.fontColor(Color.Red).fontSize('50vp')//如果，因为需要字符串类型加单位需要加双引号// .fontWeight(FontWeight.Bold)Divider().color(Color.White).strokeWidth(5)Column(){Text("喝水次数").margin({top:5}).fontColor(Color.Black).fontSize(30)Row(){Button("-").onClick(() =>{//箭头函数this.count--}).fontSize(30)Text(""+this.count).fontSize(50)Button("+").fontSize(30).onClick(() =>{//箭头函数this.count++})Text()}.justifyContent(FlexAlign.Center)//设置垂直居中.width('100%').height('80%')// Text("0")//   .fontColor(Color.Blue)//   .fontSize()}.margin({top:20}).width('90%').height('20%').backgroundColor(Color.White).borderColor(Color.Black).borderWidth(5)}.width('100%').height('100%').backgroundColor(Color.Blue)}}}

7. 状态管理

3.1.1 状态管理概述

.状态管理： 应用程序运行时的状态变化所带来的UI的重新渲染，在ArkUI中统称为状态管理机制。通过状态管理机制可以构建一个动态的、有交互的界面

image-20241119140007400

3.1.2 组件级状态管理

被调用的自定义组件是调用者的子组件，调用者则是子组件的父组件。当父子组件之间需要数据同步时，可以使用@Prop和@Link装饰器

  1. 单向数据传递

    • 子组件数据无需传递给父组件，父组件数据传递给子组件
    • 单向数据传递装饰器 - @Prop
      • @Prop修饰变量：允许组件内部修改@Prop变量，但变量的更改不会通知给父组件

  2. 双向数据传递

    • 父子组件之间数据双向传递
    • 双向数据传递装饰器-@Link
      • @Link装饰的变量可与父组件的@State变量建立双向数据绑定，任何一方有所修改都会反映给对方

  3. @Prop案例练习

@Entry //由@Entry修饰的是入口组件
//一个页面只能有一个Entry
@Component//由@Component修饰的就是自定义组件
struct DrinkWater {@State count1: number = 0// count:number = 0build() {Row() {Column() {Text("简易计数器")//颜色显示方法：对象.属性.fontColor(Color.Red).fontSize('50vp')//如果，因为需要字符串类型加单位需要加双引号// .fontWeight(FontWeight.Bold)Divider().color(Color.White).strokeWidth(5)Column(){Text("喝水次数").margin({top:5}).fontColor(Color.Black).fontSize(30)Row(){Button("-").onClick(() =>{//箭头函数this.count1--}).fontSize(30)Text(""+this.count1).fontSize(50)Button("+").fontSize(30).onClick(() =>{//箭头函数this.count1++})Text()}.justifyContent(FlexAlign.Center)//设置垂直居中.width('100%').height('80%')Text("0").fontColor(Color.Blue).fontSize(20)}.margin({top:20}).width('90%').height('20%').backgroundColor(Color.White).borderColor(Color.Black).borderWidth(5)// sonComp({count2:this.count1})sonComp({count2:this.count1})}.width('100%').height('100%').backgroundColor(Color.Blue)}}}
//子组件会继承父组件的宽高
@Component //可复用的struct sonComp{@Prop count2:numberbuild() {Column(){Text("喝水次数").margin({top:5}).fontColor(Color.Black).fontSize(30)Row(){Button("-").onClick(() =>{//箭头函数this.count2--}).fontSize(30)Text(this.count2.toString()).fontSize(50)Button("+").fontSize(30).onClick(() =>{//箭头函数this.count2++})}.justifyContent(FlexAlign.Center)//设置垂直居中.width('100%').height('80%').backgroundColor(Color.Pink)}.margin({top:20}).width('90%').height('20%').backgroundColor(Color.White).borderColor(Color.Black).borderWidth(5)}
}

效果展示

image-20241119191511247

image-20241119191530735

  1. @Link案例练习
@Entry //由@Entry修饰的是入口组件
//一个页面只能有一个Entry
@Component//由@Component修饰的就是自定义组件
struct DrinkWater {@State count1: number = 0// count:number = 0build() {Row() {Column() {Text("简易计数器")//颜色显示方法：对象.属性.fontColor(Color.Red).fontSize('50vp')//如果，因为需要字符串类型加单位需要加双引号// .fontWeight(FontWeight.Bold)Divider().color(Color.White).strokeWidth(5)Column(){Text("喝水次数").margin({top:5}).fontColor(Color.Black).fontSize(30)Row(){Button("-").onClick(() =>{//箭头函数this.count1--}).fontSize(30)Text(""+this.count1).fontSize(50)Button("+").fontSize(30).onClick(() =>{//箭头函数this.count1++})Text()}.justifyContent(FlexAlign.Center)//设置垂直居中.width('100%').height('80%')Text("0").fontColor(Color.Blue).fontSize(20)}.margin({top:20}).width('90%').height('20%').backgroundColor(Color.White).borderColor(Color.Black).borderWidth(5)// sonComp({count2:this.count1})sonComp({count2:this.count1})//会报错，但是不影响使用//soncomb({count2:$count1})不会报错}.width('100%').height('100%').backgroundColor(Color.Blue)}}}
//子组件会继承父组件的宽高
@Component //可复用的struct sonComp{@Link count2:numberbuild() {Column(){Text("喝水次数").margin({top:5}).fontColor(Color.Black).fontSize(30)Row(){Button("-").onClick(() =>{//箭头函数this.count2--}).fontSize(30)Text(this.count2.toString()).fontSize(50)Button("+").fontSize(30).onClick(() =>{//箭头函数this.count2++})}.justifyContent(FlexAlign.Center)//设置垂直居中.width('100%').height('80%')}.margin({top:20}).width('90%').height('20%').backgroundColor(Color.White).borderColor(Color.Black).borderWidth(5)}
}

效果展示

image-20241119192037117

3.1.3 应用级状态管理

概念：应用级别的状态管理，可以观察不同页面，甚至不同UIAbility的状态变化，是应用内全局的状态管理

image-20241119150705110

image-20241119194334467

3.1.4 其他状态管理

  1. @Watch用来监听状态变量的变化，当它修饰的状态变量发生变更时，回调相应的方法

代码演示

@Entry
@Component
struct Notice {@State sweet:string = "甜度100"//监测事件@State @Watch("sweetChange") sweIndex:number = 100build() {Column() {  //当图片在rawfile文件中，需要佳img.pngImage($r('app.media.img'))//image组件，加入图片路径.width("70%").height("20%").margin({top:20})Text(this.sweet).fontSize(50).margin({top:5})Button("检测甜度").onClick(() =>{this.sweIndex+=10})}.width('100%').height('100%')}//作为我们的成员方法，跟成员的变量位置一样，在组件内部build组件内部sweetChange() {this.sweet = "甜度超标"}
}

效果展示

image-20241119192228107

image-20241119192249376

代码分析：

image-20241119164637109

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

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

语义分割(semantic segmentation)

语义分割(semantic segmentation)

语义分割(semantic segmentation) 文章目录 语义分割(semantic segmentation)图像分割和实例分割代码实现 语义分割指将图片中的每个像素分类到对应的类别，语义区域的标注和预测是 像素级的，语义分割标注的像素级的边界框显然更加精细。应用&#xff1a…
阅读更多...
【STM32】在 STM32 USB 设备库添加新的设备类

【STM32】在 STM32 USB 设备库添加新的设备类

说实话，我非常想吐槽 STM32 的 USB device library，总感觉很混乱。 USB Device library architecture 根据架构图： Adding a custom class 如果你想添加新的设备类，必须修改的文件有 usbd_desc.cusbd_conf.cusb_device.c 需要…
阅读更多...
【母线槽分类与选型】

【母线槽分类与选型】

母线槽是一种高效、安全、节能的输电设备，广泛应用于各类建筑和工业领域。母线槽可以根据不同的分类方式进行划分，例如根据其结构、用途、导体材质等。母线槽以铜或铝作为导体、用非烯性绝缘支撑，然后装到金属槽中而形成的新型导体。在高层建…
阅读更多...
一些任务调度的概念杂谈

一些任务调度的概念杂谈

任务调度 1.什么是调度任务 依赖：依赖管理是整个DAG调度的核心。调度依赖包括依赖策略和依赖区间。 依赖分为任务依赖和作业依赖，任务依赖是DAG任务本身的依赖关系，作业依赖是根据任务依赖每天的作业产生的。两者在数据存储模型上有所不同…
阅读更多...
Unifying Top-down and Bottom-up Scanpath Prediction Using Transformers

Unifying Top-down and Bottom-up Scanpath Prediction Using Transformers

Abstract 大多数视觉注意力模型旨在预测自上而下或自下而上的控制，这些控制通过不同的视觉搜索和自由观看任务进行研究。本文提出了人类注意力变换器（Human Attention Transformer，HAT），这是一个能够预测两种形式注意力…
阅读更多...
解决MindSpore-2.4-GPU版本的安装问题

解决MindSpore-2.4-GPU版本的安装问题

问题背景 虽说在MindSpore-2.3之后的版本中不在正式的发行版中支持GPU硬件后端，但其实在开发分支版本中对GPU后端是有支持的： 但是在安装的过程中可能会遇到一些问题或者报错，这里复现一下我的Ubuntu-20.04环境下的安装过程。 Pip安装 基本的…
阅读更多...
【拥抱AI】如何使用BERT等预训练模型计算语义相似度

【拥抱AI】如何使用BERT等预训练模型计算语义相似度

使用BERT等预训练模型计算语义相似度是一种非常有效的方法，可以捕捉句子之间的深层次语义关系。下面是一个详细的步骤指南，介绍如何使用BERT和Sentence-BERT来计算语义相似度。 1. 环境准备 1.1 安装必要的库 首先，确保你已经安装了必要的…
阅读更多...
Excel常用技巧分享

Excel常用技巧分享

excel单元格内换行 直接按回车会退出当前单元格的编辑，如果需要在单元格中换行，需要按下AltEnter。 excel插入多行或多列 WPS 在WPS中想要插入多行，只需在右键菜单中输入对应的数字即可。 Office Excel excel中相对麻烦一些，比…
阅读更多...
C# .NET环境下调用ONNX格式YOLOV8模型问题总结

C# .NET环境下调用ONNX格式YOLOV8模型问题总结

我的环境是： Visual Studio: 2019 显卡： 一、遇到问题 1、EntryPointNotFoundException:无法在DLL“onnxruntime”中找到名为“OrtGetApiBase”的入口点。差了下原因，入口点是启动项中的问题。 原因：之前用yolov7时安装的版本在C…
阅读更多...
【PTA】【数据库】【SQL命令】编程题1

【PTA】【数据库】【SQL命令】编程题1

数据库SQL命令测试题1 10-1 显示教工编号以02开头的教师信息 作者 冰冰 单位 广东东软学院 显示教工编号以02开头的教师信息 提示：请使用SELECT语句作答。 表结构: CREATE TABLE teacher ( TId CHAR(5) NOT NULL, -- 教师工号，主键 DId CHAR(2) …
阅读更多...
VSCode快速生成vue组件模版

VSCode快速生成vue组件模版

1&#xff0c;点击设置&#xff0c;找到代码片段 2&#xff0c;搜索vue&#xff0c;打开vue.json 3&#xff0c;添加模版 vue2模板 "vue2": {"prefix": "vue2","body": ["<template>"," <div>$0</di…
阅读更多...
理解DOM：前端开发的基础

理解DOM：前端开发的基础

理解DOM 在前端开发中&#xff0c;DOM&#xff08;文档对象模型&#xff09;是一个至关重要的概念。它不仅定义了如何通过编程方式访问和修改网页内容&#xff0c;还为我们提供了一种结构化的方式来与页面交互。本文将带你了解DOM的基本概念、不同节点的操作以及何时可以进行更…
阅读更多...
如何将几个音频合成一个音频？非常简单的几种合成方法

如何将几个音频合成一个音频？非常简单的几种合成方法

如何将几个音频合成一个音频&#xff1f;音频合成不仅仅是将不同的音频文件按顺序排列&#xff0c;它还可能涉及到音量调节、剪辑、淡入淡出、音效调整等多个方面。对于一些专业的音频制作人员来说&#xff0c;音频的每一部分细节都可能需要精心打磨&#xff0c;以确保最终合成…
阅读更多...
虚拟化表格（Virtualized Table）性能优化

虚拟化表格（Virtualized Table）性能优化

文章目录 功能介绍一开始的代码领导让我们分析一下开始优化如何监听事件和传参&#xff1f;定位操作栏更加优化 功能介绍 菜鸟最近做的一个功能如下&#xff1a; 后端返回两个很大的数组&#xff0c;例如&#xff1a;数组a 1w条&#xff0c;数组b 2w条&#xff0c;然后要操作b…
阅读更多...
Orcad 输出有链接属性的PDF

Orcad 输出有链接属性的PDF

安装adobe pdf安装Ghostscript修改C:\Cadence\SPB_16.6\tools\capture\tclscripts\capUtils\capPdfUtil.tcl ​ 设置默认打印机为 Adobe PDF ​ 将Ghostscript的路径修改正确 打开cadence Orcad &#xff0c;accessories->candece Tcl/Tk Utilities-> Utilities->PD…
阅读更多...
从源头保障电力安全：输电线路动态增容与温度监测技术详解

从源头保障电力安全：输电线路动态增容与温度监测技术详解

在电力系统中&#xff0c;输电线路是电能传输的关键环节。然而&#xff0c;当导线温度过高时&#xff0c;会加速导线老化&#xff0c;降低绝缘性能&#xff0c;甚至引发短路、火灾等严重事故&#xff0c;对电网安全运行构成巨大威胁。近日&#xff0c;某地区因持续高温和用电负…
阅读更多...
递归系列 简单（倒序输出一个正整数）

递归系列 简单（倒序输出一个正整数）

倒序输出一个正整数 时间限制: 1s 类别: 递归->简单 问题描述 例如给出正整数 n12345&#xff0c;希望以各位数的逆序形式输出&#xff0c;即输出54321。 递归思想&#xff1a;首先输出这个数的个位数&#xff0c;然后将个位丢掉&#xff0c;得到新的数&#xff0c;继续…
阅读更多...
矩阵论在图像算法中的应用

矩阵论在图像算法中的应用

摘要&#xff1a; 本文详细阐述了矩阵论在图像算法中的广泛应用。首先介绍了图像在计算机中的矩阵表示形式&#xff0c;然后从图像压缩、图像变换、图像特征提取与识别、图像恢复与重建等多个方面深入分析了矩阵论相关技术的作用原理和优势。通过对这些应用的探讨&#xff0c;展…
阅读更多...
鸿蒙改变状态栏和安全区域颜色之 expandSafeArea

鸿蒙改变状态栏和安全区域颜色之 expandSafeArea

改变状态栏和安全区域颜色之 expandSafeArea 基于API12。 参考文档 直接设置build里边根元素的背景色之后&#xff0c;本想着是整个页面的颜色全变成相应的颜色&#xff0c;不过实际上状态栏跟地步安全区域是不受影响的。这个时候一般可能都会各种地方找API来设置状态栏跟安全…
阅读更多...
Ubuntu Linux使用前准备动作_使用root登录图形化界面

Ubuntu Linux使用前准备动作_使用root登录图形化界面

Ubuntu默认是不允许使用 root 登录图形化界面的。这是出于安全考虑的设置。但如果有需要&#xff0c;可以通过以下步骤来实现使用 root 登录&#xff1a; 1、设置 root 密码 打开终端&#xff0c;使用当前的管理员账户登录系统。在终端中输入命令sudo passwd root&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023