HarmonyOS 组件

news/2024/12/22 9:17:59/

在HarmonyOS中构建页面的最小单元是组件,除了官方提供的组件外我们也可以自定义组件。每一个组件都包含视图、状态、事件、生命周期这几个部分。

声明与使用

在HarmonyOS中声明组件使用的是@Component装饰器。然后使用struct关键字构建一个结构,并定义build方法。build方法中主要是进行页面视图的构建。

@Component
struct CustomCom{build(){}
}

声明组件后可以在任何其他页面或组件中使用。先通过import导入组件,接着在build函数中执行一下组件函数。

import CustomCom from '../components/CustomCom'@Entry
@Component
struct Index{build(){CustomCom();}
}

上面的组件我们简单地对视图做了封装,接下来,我们开始定义组件的状态。

组件状态

组件中定义状态分为使用装饰器和不使用装饰器两种类型。不使用装饰器定义的状态就是一个普通数据,它的变化不会对视图造成影响。使用装饰器的状态会有特殊效果。

@State

使用@State 修饰符。通过@State 定义的变量会被监听,当状态变化的时候会重新渲染视图。

@Entry
@Component
struct Index{@State name:string = '';build(){Column(){Text(this.name)Button('change  name').onClick(()=>{this.name = 'hello'})}}
}

上面,我们使用@State装饰器声明一个name属性,然后在点击按钮的时候更改这个name属性。当name属性被更改时,视图也会被重新渲染。

@Prop

使用@Prop装饰器声明的状态需要由外部组件传递数据。我们可以利用这种特性增加组件的灵活性。

@Component
struct Child{@Prop message:string = ''build(){Column(){Text(this.message)}}
}@Entry
@Component
struct Index{
@State message:string = 'hello'build(){Child({message:this.message})}
}

上面我们使用@Prop装饰器在Chil组件内部声明了一个message状态,在父组件中使用@State装饰器声明了一个message属性,并传递给children。那么当父组件中的message变化时,Child组件的值也会发生变化,视图也会重新渲染。

@State+@Prop的通信方式为父到子的单向通信,父组件可以向子组件传递数据,且当父组件的状态更新后子组件的状态也会更新。子组件内不能更改从父组件传递的数据。

值的注意的是,当传入一个多层次的引用类型的数据时,@State只会监听到第一层数据的变化,即,当第一层数据变化时视图会被重新渲染。对于更深层次的数据变化视图不会重新渲染。

@Link

使用@Link装饰器可以声明一个双向传递的状态。当父组件中的数据发生变化时,子组件会监听到这种变化,当子组件修改状态时,父组件也会更新状态。

@Component
struct Child{@Link message:string;build(){Column(){Text(this.message)Button('change).onClick(()=>{this.message = 'son'})}}
}
@Component
struct Parent{@State message:string = 'hello'build(){Column(){Text(this.message)Child({message:this.message})Button('change).onClick(()=>{this.message = 'message'})}}
}

上面我们使用@State在Parent组件中声明一个message,并传递给Child组件。在Chil组件中通过@Link装饰器接收数据。那么当我们在Parent组件中点击按钮更改message的值时,Child组件的数据会发生变化,当我们在Child组件中点击按钮更改message的值时父组件的message会同步更改。

@Link只会监听第一层的数据变化,不会对深层次的数据变化作出响应。

@Oberved和@ObjectLink

有时我们需要对深层次的数据变化也能作出相应,这个时候就需要使用@Observed@ObjectLink装饰器进行声明数据。

@Component
struct Child{@ObjectLink person:Person[];build(){Column(){ForEach(this.person,(item:Person)=>{Row(){Text(item.name)Text(item.age+'')}})}}
}
interface Address{country:string
}
@Observed class Person{name:stringage:numberaddress:Addressconstructor(name:string,age:number,address?:Address){this.name = name;this.age = age;this.address = address;}}
@Component
struct Parent{address:Address = {country:'ch'}@State personList:Person[] = [new Person('hello',29,this.address)	,new Person('hello',29)	,new Person('hello',29)	]build(){Column(){Child({person:this.personList})Btton('change').onClick(()=>{this.personList[0].address.country = 'zh'})}}
}

上面使用@Observed@ObjectLink进行数据传递,当我们在Parent组件中点击按钮更改personList中的数据时,Child也会进行同步更改。

事件

HarmonyOS组件中没有分发事件的方法,要想在组件发生某些事件的时候执行外部逻辑,需要向组件传递函数。

@Component
struct Child{
@Prop onClick:()=>void;build(){Column(){Button('test').onClick(()=>{this.onClick()})}}
}@Component
struct Parent{handleClick(){console.log('Child click')}build(){Child({onClick:this.handleClick})}
}

生命周期

aboutAppear

在组件加载时触发

onPageShow

在页面显示时触发,在初次渲染以及应用从后台切换到后台时都会触发。

onDidBuild

在组件渲染后触发

onPageHide

在页面隐藏时触发,在应用切换到后台以及切换到其他页面时都会触发。

onBackPress

在页面返回时触发,在页面返回到上一个页面时触发。

该函数可以返回一个布尔值,如果为true,表示页面自己处理返回逻辑。

aboutToDisappear

组件销毁时触发。

值的注意的是,onPageShowonPageHide只在使用@Entry装饰器修饰的组件中才能触发。


http://www.ppmy.cn/news/1533067.html

相关文章

二十个编程语言发展的“拦路虎”

引言 编程语言的发展是信息技术史上的重要篇章,它不仅记录了人类智慧与技术进步的轨迹,更是现代信息技术的基础。然而,在这一过程中,各种挑战如同“拦路虎”一般,考验着程序员们的智慧与创造力。本文将探讨这些挑战如…

IP协议讲解

IP协议 IP协议的本质:提供一种能力,将数据跨网络从A主机传输到B主机 4位版本号(version): 指定IP协议的版本, 对于IPv4来说, 就是4. 4位头部长度(header length): IP头部的长度是多少个32bit, 也就是 length * 4 的字节数. 4bit表示最大 的数字是15, 因…

状态模式原理剖析

《状态模式原理剖析》 状态模式(State Pattern) 是一种行为设计模式,它允许对象在其内部状态改变时改变其行为。换句话说,当对象状态发生变化时,它的行为也会随之变化。 通过状态模式,可以消除通过 if-else…

Pgsql 数据库操作

pgsql,即PostgreSQL,是一种功能强大的开源对象关系数据库系统。它使用并扩展了SQL语言,使其能够存储复杂的数据结构和执行强大的查询。以下是对pgsql数据库操作的一些详细介绍: 一、基本操作 建立数据库连接 可以使用命令行工具…

在线css像素px到Em的转换器

具体请前往:在线Px转Em工具--将绝对像素(px)长度单位转换为相对长度em

图论(bfs系列)9/30

单源点系列: 一、二进制矩阵中的最短路径 给你一个 n x n 的二进制矩阵 grid 中,返回矩阵中最短 畅通路径 的长度。如果不存在这样的路径,返回 -1 。 二进制矩阵中的 畅通路径 是一条从 左上角 单元格(即,(0, 0))到…

景联文科技入选《2024中国AI大模型产业图谱2.0版》数据集代表厂商

近日,大数据产业领域头部媒体数据猿携手上海大数据联盟联合发布了备受瞩目的《2024中国AI大模型产业图谱2.0版》。以大数据与AI为代表的智能技术为主要视角,聚焦全产业链,为业内提供更为专业直观的行业指导。 景联文科技凭借高质量数据集&…

C++中数据类型的大小

在 C 中,数据类型的大小在不同系统架构(32 位和 64 位)上可能会有所不同。以下是一些常见数据类型在这两种系统中通常占用的字节数。 基本数据类型大小 数据类型32 位系统64 位系统char1 byte1 byteshort2 bytes2 bytesint4 bytes4 byteslo…