鸿蒙应用开发从入门到实战（七）：ArkTS组件声明语法
鸿蒙应用开发从入门到实战七ArkTS组件声明语法一、为什么需要组件声明语法在鸿蒙应用开发中ArkTSArk TypeScript是构建用户界面的核心语言。想象一下如果你要搭建一个乐高城堡每个积木块就是组件而组件声明语法就是告诉你如何正确地拼接这些积木。没有它你的界面就像一堆散落的零件毫无结构可言。ArkTS组件声明语法允许开发者用简洁、声明式的方式描述UI结构它让代码更易读、更易维护并且能自动处理状态变化带来的界面更新。比如当你改变一个变量的值组件会自动重新渲染无需手动操作DOM。## 二、基础组件声明从Hello World开始先来看一个最简单的组件声明示例。在ArkTS中每个组件都是一个函数通过装饰器Component标记并用build方法返回UI结构。typescript// 定义一个简单的文本组件Componentstruct HelloWorld { // 状态变量变化时会触发UI更新 State message: string 欢迎来到鸿蒙世界 // build方法是组件的核心返回UI结构 build() { Column() { Text(this.message) .fontSize(24) .fontWeight(FontWeight.Bold) .margin({ bottom: 20 }) Button(点击更新) .onClick(() { this.message 你点击了按钮 }) } .padding(20) .alignItems(HorizontalAlign.Center) }}代码解析-Component告诉系统这是一个UI组件-State标记状态变量当其值变化时组件会自动刷新-build()描述组件结构类似于React中的render函数-Column垂直布局容器类似Flex容器-Text文本组件用于显示文字-Button按钮组件通过onClick绑定点击事件## 三、组件复用与组合像搭积木一样构建页面实际开发中你不会把所有代码写在一个组件里。ArkTS支持组件嵌套和复用你可以把复杂的UI拆分成多个小组件然后像搭积木一样组合起来。### 3.1 创建可复用的子组件typescript// 定义一个可复用的卡片组件Componentstruct CardItem { // 通过Prop接收父组件传递的数据 Prop title: string Prop description: string Prop imageUrl: string build() { Row() { // 左侧图片 Image(this.imageUrl) .width(80) .height(80) .borderRadius(10) .margin({ right: 12 }) // 右侧文字 Column() { Text(this.title) .fontSize(18) .fontWeight(FontWeight.Medium) .lineHeight(24) Text(this.description) .fontSize(14) .fontColor(#666666) .lineHeight(20) .margin({ top: 4 }) } .alignItems(HorizontalAlign.Start) } .padding(12) .backgroundColor(#FFFFFF) .borderRadius(8) .shadow({ radius: 4, color: #0000001A }) .width(100%) .margin({ bottom: 8 }) }}// 在父组件中使用卡片组件EntryComponentstruct CardList { State items: CardData[] [ { title: 鸿蒙入门, desc: 学习基础组件, img: common/icon1.png }, { title: 状态管理, desc: 掌握State和Prop, img: common/icon2.png }, { title: 事件处理, desc: 交互式UI开发, img: common/icon3.png } ] build() { Scroll() { Column() { // 循环渲染卡片组件 ForEach(this.items, (item: CardData, index: number) { CardItem({ title: item.title, description: item.desc, imageUrl: item.img }) }, (item: CardData) item.title) } .padding(16) } .backgroundColor(#F5F5F5) .height(100%) }}// 定义数据类型interface CardData { title: string desc: string img: string}代码解析-Prop接收父组件传入的属性单向数据流-ForEach数组循环渲染第二个参数是渲染函数第三个参数是唯一key生成函数-Scroll滚动容器内容超出时自动滚动-Entry标记入口组件应用启动时加载## 四、组件的生命周期与状态管理组件不是静态的它有自己的生命周期。理解这几个阶段能帮你写出更健壮的代码。| 生命周期方法 | 触发时机 | 常见用途 ||------------|---------|---------||aboutToAppear()| 组件即将创建时 | 初始化数据、订阅事件 ||aboutToDisappear()| 组件即将销毁时 | 清理资源、取消订阅 ||onPageShow()| 页面显示时 | 更新数据、恢复状态 ||onPageHide()| 页面隐藏时 | 暂停操作、保存数据 |typescriptComponentstruct LifecycleDemo { State count: number 0 private timer: number -1 // 组件创建前触发 aboutToAppear() { console.log(组件即将创建) // 模拟定时器 this.timer setInterval(() { this.count }, 1000) as unknown as number } // 组件销毁前触发 aboutToDisappear() { console.log(组件即将销毁) // 清理定时器防止内存泄漏 if (this.timer ! -1) { clearInterval(this.timer) } } build() { Column() { Text(计时器${this.count}秒) .fontSize(20) .margin({ bottom: 20 }) Button(返回) .onClick(() { // 模拟页面跳转触发组件销毁 router.back() }) } .padding(30) .width(100%) .height(100%) }}## 五、组件样式与响应式设计ArkTS支持链式调用样式方法让UI设计更直观。同时通过State和Prop可以实现响应式更新。typescriptComponentstruct StyledButton { State isPressed: boolean false build() { Button(点击我) .width(this.isPressed ? 200 : 150) .height(50) .backgroundColor(this.isPressed ? #007AFF : #4CAF50) .borderRadius(this.isPressed ? 25 : 8) .fontSize(this.isPressed ? 20 : 16) .fontColor(#FFFFFF) .shadow({ radius: this.isPressed ? 8 : 4, color: this.isPressed ? #007AFF80 : #4CAF5080 }) .onClick(() { this.isPressed !this.isPressed }) .animation({ duration: 300, // 动画时长300ms curve: Curve.EaseInOut }) }}**响应式设计技巧**1. 使用State标记可变状态2. 通过Prop传递父组件数据3. 利用Watch监听状态变化4. 使用animation方法添加过渡动画## 六、实战构建一个简单的待办事项列表现在结合以上知识创建一个完整的待办事项应用typescriptEntryComponentstruct TodoList { State todos: { text: string, done: boolean }[] [ { text: 学习ArkTS组件语法, done: false }, { text: 完成实战练习, done: false } ] State inputValue: string build() { Column() { // 输入区域 Row() { TextInput({ placeholder: 输入待办事项 }) .width(70%) .height(40) .onChange((value: string) { this.inputValue value }) Button(添加) .width(25%) .height(40) .margin({ left: 10 }) .onClick(() { if (this.inputValue.trim() ! ) { this.todos.push({ text: this.inputValue, done: false }) this.inputValue } }) } .padding(10) .width(100%) // 待办事项列表 List() { ForEach(this.todos, (item: { text: string, done: boolean }, index: number) { ListItem() { Row() { Checkbox() .select(item.done) .onChange((value: boolean) { this.todos[index].done value }) Text(item.text) .fontSize(16) .decoration({ type: item.done ? TextDecorationType.LineThrough : TextDecorationType.None }) .margin({ left: 10 }) Button(删除) .fontColor(#FF4444) .backgroundColor(transparent) .onClick(() { this.todos.splice(index, 1) }) } .padding(10) .width(100%) } }) } .width(100%) .layoutWeight(1) } .width(100%) .height(100%) .backgroundColor(#F0F0F0) }}## 七、总结通过本文的学习我们掌握了ArkTS组件声明的核心语法1.基本结构使用Component装饰器定义组件通过build()方法返回UI结构2.状态管理State管理组件内部状态Prop接收父组件属性3.组件组合通过嵌套和循环渲染ForEach构建复杂界面4.生命周期aboutToAppear、aboutToDisappear等钩子管理组件行为5.样式设计链式调用样式方法支持响应式更新和动画记住组件声明语法的核心思想是“声明式编程”——你只需描述UI应该长什么样框架会自动处理更新逻辑。这大大降低了UI开发的复杂度让你能专注于业务逻辑。在实际项目中建议将组件拆分成小而专注的单元遵循单一职责原则。同时善用State和Prop实现数据流动配合ForEach处理列表渲染就能轻松应对各种UI需求。下一篇文章我们将深入讲解ArkTS的事件处理机制包括手势识别、触摸事件等高级特性敬请期待
)
