1.创建自定义组件
在ArkUI中,UI显示的内容均为组件,由框架直接提供的称为系统组件,由开发者定义的称为自定义组件。在进行UI界面开发时,通常不是简单的将系统组件进行组合使用,而是需要考虑代码可复用性、业务逻辑与UI分离,后续版本演进等因素。因此,将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。
自定义组件具有以下特点:
可组合:允许开发者组合使用系统组件、及其属性和方法。
可重用:自定义组件可以被其他组件重用,并作为不同的实例在不同的父组件活容器中使用。
数据驱动UI更新:通过状态变量的改变,来驱动UI的刷新。
/** * author:创客未来 * copyright:com.ckFuture.hrb */ /** * 1:组件必须使用 @Component 装饰器 * 2: @Entry 装饰哪个组件、哪个就呈现在页面上 * 3: 被@Entry装饰的入口组件,build()中必须有且仅有一个**根容器**组件 * 其他自定义组件,build() */ @Entry @Component struct Demo2 { @State message: string = '诗词学习' build() { Row() { Column() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) itemComponent() itemComponent({content:'我是传递字符串'}) } .width('100%') } .height('100%') } } @Component struct itemComponent{ // 自定义组件可以使用私有化变量(组件内部的变量都是私有化的,默认就是私有化) 传递参数 private content: string = '默认字符串' build(){ Row(){ Image($r('app.media.icon')) .width(20) .height(20) .margin(15) Text(this.content) } .backgroundColor(Color.Pink) .borderRadius(25) .margin({ top:15 }) } }
组件内部点击事件
/** * author:创客未来 * copyright:com.ckFuture.hrb */ import FaultLogger from '@ohos.faultLogger' /** * 1:组件必须使用 @Component 装饰器 * 2: @Entry 装饰哪个组件、哪个就呈现在页面上 * 3: 被@Entry装饰的入口组件,build()中必须有且仅有一个**根容器**组件 * 其他自定义组件,build() */ @Entry @Component struct Demo2 { @State message: string = '诗词学习' build() { Row() { Column() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) itemComponent() itemComponent({content:'我是传递字符串'}) } .width('100%') } .height('100%') } } @Component struct itemComponent{ // 自定义组件可以使用私有化变量(组件内部的变量都是私有化的,默认就是私有化) 传递参数 private content: string = '默认字符串' // 哪种情况可以驱动UI更新,@State @State isDone: boolean = false build(){ Row(){ Image(this.isDone?$r('app.media.iconOk'):$r('app.media.icon')) .width(20) .height(20) .margin(15) Text(this.content) } .backgroundColor(Color.Pink) .borderRadius(25) .margin({ top:15 }) .onClick(()=>{ //点击这一行修改图片 this.isDone = !this.isDone }) } }
点击自定义组件,文字变化效果
@Component struct itemComponent{ // 自定义组件可以使用私有化变量(组件内部的变量都是私有化的,默认就是私有化) 传递参数 private content: string = '默认字符串' // 哪种情况可以驱动UI更新,@State @State isDone: boolean = false build(){ Row(){ Image(this.isDone?$r('app.media.icon'):$r('app.media.icon')) .width(20) .height(20) .margin(15) Text(this.content) .decoration({ type:this.isDone?TextDecorationType.LineThrough:TextDecorationType.None }) } .backgroundColor(Color.Pink) .borderRadius(25) .margin({ top:15 }) .onClick(()=>{ //点击这一行修改图片 this.isDone = !this.isDone }) } }
标签:自定义,content,UI,build,组件,isDone From: https://www.cnblogs.com/ckfuture/p/17875052.html