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.rhkb.cn/news/474591.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

14. 乘法口诀挑战赛

14. 乘法口诀挑战赛

文章目录 概要整体架构流程技术细节小结 1. 概要 ~ Jack Qiao对米粒说：“为了帮助孩子们更好地学习乘法，智慧镇的镇长决定举办一场特别的活动——“乘法口诀挑战赛”。比赛的规则非常简单：参与者需要输入一个正整数 n，然后系统会…
阅读更多...
环形缓冲区 之 STM32 串口接收的实现

环形缓冲区 之 STM32 串口接收的实现

STM32串口数据接收环形缓冲区接收实例说明 ...... 矜辰所致前言 关于环形缓冲区，网上有大量的理论说明文章，在有些操作系统中，会有实现环形缓冲区的代码，比如 RT-Thread 的 ringbuffer.c 和 ringbuffer.h 文件，Li…
阅读更多...
Matplotlib | 理解直方图中bins表示的数据含义

Matplotlib | 理解直方图中bins表示的数据含义

引出问题 hist作图中 bins 发生变换 y轴的数据也变化 想不通 不是说y轴计算的是频率吗 频率既然是定值 为什么y轴的数据就还会变化？那我确定了bins的数值 我想获得bins内各个柱子（bin）中数据点的数量如何获得 bins的变化 先看一组数据 da…
阅读更多...
【Linux】基础02

【Linux】基础02

Linux编译和调试 VI编辑文件 vi : 进入文件编辑 是命令行模式 i ：从光标处进入插入模式 dd : 删除光标所在行 n dd 删除指定行数 Esc ： 退出插入模式 ： 冒号进入末行模式 :wq : 保存退出 :q ： 未修改文件可以退出 :q! …
阅读更多...
Linux网络——套接字编程

Linux网络——套接字编程

1. 网络通信基本脉络 基本脉络图如上，其中数据在不同层的叫法不一样，比如在传输层时称为数据段，而在网络层时称为数据报。我们可以在 Linux 中使用 ifconfig 查看网络的配置，如图 其中，inet 表示的是 IPv4，…
阅读更多...
深度学习的实践层面

深度学习的实践层面

深度学习的实践层面 设计机器学习应用 在训练神经网络时，超参数选择是一个高度迭代的过程。我们通常从一个初步的模型框架开始，进行编码、运行和测试，通过不断调整优化模型。 数据集一般划分为三部分：训练集、验证集和测试集。常…
阅读更多...
Jmeter 如何导入证书并调用https请求

Jmeter 如何导入证书并调用https请求

Jmeter 如何导入证书并调用https请求 通过SSL管理器添加证书文件 支持添加的文件为.p12，.pfx，.jks 如何将pem文件转换为pfx文件？ 在公司内部通常会提供3个pem文件。 ca.pem：可以理解为是根证书，用于验证颁发的证…
阅读更多...
LabVIEW 温湿度测试与监控系统

LabVIEW 温湿度测试与监控系统

煤炭自燃是煤矿和煤炭储存领域面临的重大安全隐患，尤其是在煤炭堆积和运输过程中，温湿度变化会直接影响煤体的氧化速率和自燃倾向。传统的监测手段通常存在实时性差、数据处理复杂等问题，难以准确评估煤自燃的风险。因此，设计了一…
阅读更多...
IDEA 开发工具常用快捷键有哪些？

IDEA 开发工具常用快捷键有哪些？

‌在IDEA中，输出System.out.println()的快捷键是sout，输入后按回车（或Tab键）即可自动补全为System.out.println()‌‌。 此外，IDEA中还有一些其他常用的快捷键： 创建main方法的快捷键是psvm，代…
阅读更多...
KF UKF

KF UKF

我需要Kalman 现在，主要是用来处理检测问题情况里的漏检，因为模拟了一段2D， （x，y）的数据，为了看效果，画的线尽量简单一点： import numpy as np import matplotlib.pyplo…
阅读更多...
多品牌摄像机视频平台EasyCVR视频融合平台+应急布控球：打造城市安全监控新体系

多品牌摄像机视频平台EasyCVR视频融合平台+应急布控球：打造城市安全监控新体系

在当今快速发展的智慧城市和数字化转型浪潮中，视频监控技术已成为提升公共安全、优化城市管理、增强应急响应能力的重要工具。EasyCVR视频监控平台以其强大的多协议接入能力和多样化的视频流格式分发功能，为用户提供了一个全面、灵活、高效的视频监控解决…
阅读更多...
第8章硬件维护-8.2 可维护性和可靠性验收

第8章硬件维护-8.2 可维护性和可靠性验收

8.2 可维护性和可靠性验收 可维护性和可靠性验收非常重要，硬件维护工程师在后端发现问题后，总结成可维护性和可靠性需求，在产品立项的时候与新特性一起进行需求分析，然后经过设计、开发和测试环节，在产品中落地。这些需…
阅读更多...
医学图像语义分割：前列腺肿瘤、颅脑肿瘤、腹部多脏器 MRI、肝脏 CT、3D肝脏、心室

医学图像语义分割：前列腺肿瘤、颅脑肿瘤、腹部多脏器 MRI、肝脏 CT、3D肝脏、心室

医学图像语义分割：前列腺肿瘤、颅脑肿瘤、腹部多脏器 MRI、肝脏 CT、3D肝脏、心室 语义分割网络FCN：通过将全连接层替换为卷积层并使用反卷积上采样，实现了第一个端到端的像素级分割网络U-Net：采用对称的U形编解码器结构&#xff…
阅读更多...
如何解决多系统数据重复与冲突问题？

如何解决多系统数据重复与冲突问题？

多系统并行运作已成为现代企业的常态。企业通常同时使用ERP、CRM、HR等多个业务系统来管理不同的功能模块。然而，这种多系统环境也带来了一个常见且棘手的问题：数据重复与矛盾。由于各系统独立运行且缺乏有效的集成机制，不同系统间的数据容易…
阅读更多...
麒麟时间同步搭建chrony服务器

麒麟时间同步搭建chrony服务器

搭建chrony服务器 在本例中，kyserver01（172.16.200.10）作为客户端，同步服务端时间；kyserver02（172.16.200.11）作为服务端，提供时间同步服务。 配置服务端，修改以下内容…
阅读更多...
【GPTs】Ai-Ming：AI命理助手，个人运势与未来发展剖析

【GPTs】Ai-Ming：AI命理助手，个人运势与未来发展剖析

博客主页： [小ᶻZ࿆] 本文专栏: AIGC | GPTs应用实例 文章目录 💯GPTs指令💯前言💯Ai-Ming主要功能适用场景优点缺点 💯小结 💯GPTs指令 中文翻译： defcomplete_sexagenary（年&a…
阅读更多...
Chainlit快速实现AI对话应用将聊天记录的持久化到MySql关系数据库中

Chainlit快速实现AI对话应用将聊天记录的持久化到MySql关系数据库中

概述 默认情况下，Chainlit 应用不会保留其生成的聊天和元素。即网页一刷新，所有的聊天记录，页面上的所有聊天记录都会消失。但是，存储和利用这些数据的能力可能是您的项目或组织的重要组成部分。 之前写过一篇文章《Chainlit快速…
阅读更多...
【动手学深度学习Pytorch】6. LeNet实现代码

【动手学深度学习Pytorch】6. LeNet实现代码

LeNet（LeNet-5）由两个部分组成：卷积编码器和全连接层密集块 x.view(): 对tensor进行reshape import torch from torch import nn from d2l import torch as d2lclass Reshape(torch.nn.Module):def forward(self, x):return x.view(-1, 1, 28…
阅读更多...
AI工具百宝箱｜任意选择与Chatgpt、gemini、Claude等主流模型聊天的Anychat，等你来体验！

AI工具百宝箱｜任意选择与Chatgpt、gemini、Claude等主流模型聊天的Anychat，等你来体验！

文章推荐 AI工具百宝箱｜使用Deep Live Cam，上传一张照片就可以实现实时视频换脸...简直太逆天！ Anychat 这是一款可以与任何模型聊天 （chatgpt、gemini、perplexity、claude、metal llama、grok 等）的应用。 在页面…
阅读更多...
Excel数据动态获取与映射

Excel数据动态获取与映射

处理代码 动态映射 动态读取 excel 中的数据，并通过 json 配置 指定对应列的值映射到模板中的什么字段上 private void GetFreightFeeByExcel(string filePath) {// 文件名需要以快递公司命名 便于映射查询string fileName Path.GetFileNameWithoutExtension(fi…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023