HarmonyOS NEXT 实战系列04-组件状态

简介: 本文介绍了ArkUI中组件状态的三种装饰器:@State、@Prop和@Link。@State用于定义状态变量,其变化驱动UI更新;@Prop实现父组件向子组件单向传值,子组件修改不会影响父组件;@Link则在父子组件间建立双向绑定,实现数据同步更新。通过示例代码详细展示了简单类型、对象类型及数组类型变量的操作方法,以及自定义组件的创建与复用,帮助开发者理解数据驱动UI的核心机制。

自定义组件拥有变量,变量必须被装饰器装饰才可以成为状态变量,状态变量的改变会引起UI的渲染刷新。如果不使用状态变量,UI只能在初始化时渲染,后续将不会再刷新。 下图展示了State和View(UI)之间的关系。

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

  1. 组件状态-@State
    @State装饰的变量,或称为状态变量,一旦变量拥有了状态属性,就可以触发其直接绑定UI组件的刷新。当状态改变时,UI会发生对应的渲染改变。

简单类型变量
@Entry
@Component
struct TestPage {
@State
count: number = 0

build() {
Column({ space: 50 }) {
Row() {
Text('-')
.textButton()
.onClick(() => {
this.count--
})
Text(this.count.toString())
.padding(15)
Text('+')
.textButton()
.onClick(() => {
this.count++
})
}
}
.width('100%')
.height('100%')
.margin({ top: 50 })
}
}

@Extend(Text)
function textButton() {
.fontSize(20)
.backgroundColor('#CCCCCC')
.width(32)
.aspectRatio(1)
.borderRadius(16)
.textAlign(TextAlign.Center)
}

对象类型变量
@Entry
@Component
struct TestPage {
@State
students: string[] = ['小红', '小明']

build() {
Column({ space: 10 }) {
ForEach(this.students, (item: string, i) => {
Row({ space: 10 }){
Text(item)
Text('-')
.textButton()
.onClick(() => {
// 从索引x处,删除x条
this.students.splice(i, 1)
})
}
})
Button('添加学生')
.onClick(() => {
// 追加
this.students.push('小芳')
})
}
}
.width('100%')
.height('100%')
.margin({ top: 50 })
}
}

@Extend(Text)
function textButton() {
.fontSize(20)
.backgroundColor('#CCCCCC')
.width(32)
.aspectRatio(1)
.borderRadius(16)
.textAlign(TextAlign.Center)
}

数组类型变量
interface Person {
name: string
age: number
}

@Entry
@Component
struct TestPage {
@State
person: Person = { name: 'Jack', age: 18 }

build() {
Column({ space: 50 }) {
Row({ space: 10 }){
Text(this.person.name)
Text(this.person.age.toString())
Button('明年')
.onClick(() => {
this.person.age ++
})
}
}
.width('100%')
.height('100%')
.margin({ top: 50 })
}
}

  1. 组件状态-@Prop
    @Prop装饰的变量可以和父组件建立单向的同步关系。@Prop装饰的变量是可变的,但是变化不会同步回其父组件。

1)自定义组件

在ArkUI中,UI显示的内容均为组件,由框架直接提供的称为系统组件,由开发者定义的称为自定义组件。

可组合:允许开发者组合使用系统组件、及其属性和方法。
可重用:自定义组件可以被其他组件重用,并作为不同的实例在不同的父组件或容器中使用。
数据驱动UI更新:通过状态变量的改变,来驱动UI的刷新。
@Component
struct MyComponent {
build() {
// 组件结构
}
}
尝试:提取 counter 组件

@Entry
@Component
struct TestPage {

build() {
Column({ space: 50 }) {
CounterComp()
CounterComp()
}
.width('100%')
.height('100%')
.margin({ top: 50 })
}
}

@Component
struct CounterComp {
@State count: number = 0

build() {
Row() {
Text('-')
.textButton()
.onClick(() => {
this.count--
})
Text(this.count.toString())
.padding(15)
Text('+')
.textButton()
.onClick(() => {
this.count++
})
}
}
}

@Extend(Text)
function textButton() {
.fontSize(20)
.backgroundColor('#CCCCCC')
.width(32)
.aspectRatio(1)
.borderRadius(16)
.textAlign(TextAlign.Center)
}

2)父子单向同步

@Entry
@Component
struct TestPage {
@State count: number = 0

build() {
Column({ space: 50 }) {
// Prop 父传值给子
CounterComp({ count: this.count })
CounterComp({ count: this.count })
}
.width('100%')
.height('100%')
.margin({ top: 50 })
}
}

@Component
struct CounterComp {
@Prop @Require count: number

build() {
Row() {
Text('-')
.textButton()
.onClick(() => {
this.count--
})
Text(this.count.toString())
.padding(15)
Text('+')
.textButton()
.onClick(() => {
this.count++
})
}
}
}

@Extend(Text)
function textButton() {
.fontSize(20)
.backgroundColor('#CCCCCC')
.width(32)
.aspectRatio(1)
.borderRadius(16)
.textAlign(TextAlign.Center)
}

注意:

虽然 @Prop 修饰的状态不会同步到父,但是字组件UI是会影响的
可以加上 @Require 代表必传,可省略初始值

  1. 组件状态-@Link
    子组件中被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。

@Entry
@Component
struct TestPage {
@State count: number = 0

build() {
Column({ space: 50 }) {
// Link 父同步子,子同步父
CounterComp({ count: this.count })
CounterComp({ count: this.count })
}
.width('100%')
.height('100%')
.margin({ top: 50 })
}
}

@Component
struct CounterComp {
@Link count: number

build() {
Row() {
Text('-')
.textButton()
.onClick(() => {
this.count--
})
Text(this.count.toString())
.padding(15)
Text('+')
.textButton()
.onClick(() => {
this.count++
})
}
}
}

@Extend(Text)
function textButton() {
.fontSize(20)
.backgroundColor('#CCCCCC')
.width(32)
.aspectRatio(1)
.borderRadius(16)
.textAlign(TextAlign.Center)
}

————————————————

                        版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
AI 代码解读

原文链接:https://blog.csdn.net/zsgzsgzsgzsgzsg/article/details/146183945

目录
打赏
0
2
2
0
28
分享
相关文章
HarmonyOS NEXT 实战系列09-生命周期
页面与组件生命周期介绍:页面生命周期(@Entry装饰)包含onPageShow、onPageHide、onBackPress等接口,分别在页面显示、隐藏和返回按钮点击时触发;组件生命周期(@Component装饰)包含aboutToAppear和aboutToDisappear,在组件创建与销毁时回调。示例代码展示了生命周期函数的使用场景及执行时机,帮助开发者更好地管理页面和组件状态。
HarmonyOS NEXT 实战系列09-生命周期
HarmonyOS NEXT 实战系列10-网络通信
本文介绍了网络通信相关知识,包括HTTP协议的工作原理、鸿蒙系统中HTTP模块的使用方法、Promise异步操作处理机制及async/await语法糖的应用,以及JSON数据格式的语法规则与转换方法。重点讲解了HTTP请求响应流程、鸿蒙开发中的网络权限申请与代码实现、Promise三种状态及创建方式,并通过示例说明异步编程技巧和JSON在数据传递中的应用。
35 10
HarmonyOS Next~HarmonyOS应用开发工具:DevEco Testing
HarmonyOS应用开发工具DevEco Testing,作为保障应用质量的关键利器,支持多维度测试(单元、UI、性能等)与智能化优化。其分布式测试框架、性能基线管理和智能用例推荐等功能,覆盖应用全生命周期。通过自动化测试策略、持续集成和性能调优,助力开发者高效构建高质量HarmonyOS应用,推动生态发展。
17 2
HarmonyOS Next~HarmonyOS应用开发工具之AppGallery Connect
AppGallery Connect(AGC)是华为为HarmonyOS开发者提供的全生命周期服务平台,支持开发、测试、上架到运营全流程。其核心功能包括应用分发、云数据库、认证服务和云函数等,助力开发者提升效率、缩短开发周期。AGC采用分层架构设计,集成40+云端服务能力,覆盖170+国家/地区,支持全球化业务拓展。通过事件跟踪、异常监控等工具,帮助开发者优化性能与用户体验。未来,AGC将引入低代码开发、增强现实等新能力,助力构建高质量HarmonyOS应用。
15 4
|
5天前
|
HarmonyOS NEXT 实战系列-综合案例新闻页
本示例展示了如何通过 `ForEach` 遍历数据并结合 HTTP 请求动态渲染新闻列表。首先定义了 `News` 接口描述数据结构,接着在组件中使用 `List` 和 `ForEach` 渲染新闻项,包含标题、来源、评论数、时间和图片等信息。同时,通过 `http.createHttp()` 获取远程数据并更新列表。代码结构清晰,适配动态数据展示需求。
鸿蒙相机开发实战:从设备适配到性能调优 —— 我的 ArkTS 录像功能落地手记(API 15)
本文分享鸿蒙相机开发经验,从环境准备到核心逻辑实现,涵盖权限声明、模块导入、Surface关联与分辨率匹配,再到录制控制及设备适配法则。通过实战案例解析,如旋转补偿、动态帧率调节和编解码优化,帮助开发者掌握功能实现、设备适配与体验设计三大要点,减少开发坑点。适合鸿蒙新手及希望深化硬件交互能力的工程师参考收藏。
21 2
HarmonyOS ArkTS声明式UI开发实战教程
本文深入探讨了ArkTS作为HarmonyOS生态中新一代声明式UI开发框架的优势与应用。首先对比了声明式与命令式开发的区别,展示了ArkTS如何通过直观高效的代码提升可维护性。接着分析了其核心三要素:数据驱动、组件化和状态管理,并通过具体案例解析布局体系、交互组件开发技巧及复杂状态管理方案。最后,通过构建完整TODO应用实战,结合调试优化指南,帮助开发者掌握声明式UI设计精髓,感受ArkTS的独特魅力。文章鼓励读者通过“破坏性实验”建立声明式编程思维,共同推动HarmonyOS生态发展。
38 3
鸿蒙开发:什么是ArkTs?
本小结主要简单介绍了ArkTs语言的相关知识,都是一些概念性质的内容,大家作为一个了解即可
99 61
鸿蒙开发:ArkTs语言注释
关于注释,有一点需要注意,那就是,注释,不会被编译器或解释器执行,而本小节的重点并不是简单的教大家注释如何去写,而是在实际的项目中,我们能够真正的把注释投入到实际的开发中。
54 18
鸿蒙开发:ArkTs语言注释
鸿蒙开发:权限管理之权限声明
本文,主要简单概述了为什么要有权限管理,以及权限管理的声明原则,这些都是基本的概念内容,大家做为了解即可,重要的是怎么声明权限,在什么位置声明权限,这一点需要掌握。
50 16
鸿蒙开发:权限管理之权限声明
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等