第九天 动手实践ArkTS，创建简单的UI组件

以下是使用ArkTS创建简单UI组件的分步指南：

1. 环境准备

1. 安装DevEco Studio 3.0+
2. 创建新项目：
   • 选择"Application" -> “Empty Ability”
   • 语言选择ArkTS
   • 完成项目创建

2. 基础UI组件创建

// 在EntryAbility.ets中修改
@Entry
@Component
struct HelloWorld {
  @State message: string = 'Hello World'

  build() {
    Column() {
      // 文本组件
      Text(this.message)
        .fontSize(30)
        .fontColor(Color.Blue)
        .margin(10)

      // 按钮组件
      Button('点击我')
        .width('50%')
        .height(40)
        .onClick(() => {
          this.message = '你好，世界!'
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

3. 关键代码解释

1. 组件结构

   • @Entry：标记入口组件
   • @Component：声明自定义组件
   • struct：定义组件结构体

2. 状态管理

   @State message: string = 'Hello World'
   

   • @State装饰器实现数据驱动UI更新

3. 布局系统

   Column() {
     // 子组件
   }
   .justifyContent(FlexAlign.Center)
   

   • 使用Flex布局容器
   • 支持Row/Column/Stack等布局方式

4. 事件处理

   .onClick(() => {
     this.message = '你好，世界!'
   })
   

   • 箭头函数处理点击事件
   • 自动触发UI更新

4. 运行效果

• 初始显示蓝色"Hello World"
• 点击按钮后：
  • 文本变为"你好，世界!"
  • 按钮宽度为屏幕50%
  • 垂直居中布局

5. 扩展功能示例

条件渲染

@State isShow: boolean = true

build() {
  Column() {
    if (this.isShow) {
      Text('显示内容').fontSize(20)
    }
    
    Button('切换显示')
      .onClick(() => {
        this.isShow = !this.isShow
      })
  }
}

列表渲染

@State items: Array<string> = ['苹果', '香蕉', '橘子']

build() {
  List() {
    ForEach(this.items, (item) => {
      ListItem() {
        Text(item)
          .fontSize(20)
          .padding(10)
      }
    })
  }
}

6. 样式设置技巧

1. 链式调用

   Text('样式示例')
     .fontSize(24)
     .fontColor('#FF0000')
     .backgroundColor(Color.Yellow)
   

2. 通用样式属性

   属性名	类型	说明
   .width	Length	宽度（‘100%’ / 200）
   .height	Length	高度
   .margin	Margin	外边距
   .padding	Padding	内边距
   .border	BorderOptions	边框样式

7. 调试技巧

1. 实时预览：

   • 开启预览器（Previewer）
   • 支持热重载（修改代码自动刷新）

2. 日志输出：

   console.log('当前状态:', this.message)
   

3. 组件检查：

   • 使用DevEco Studio的布局边界显示
   • 查看组件层级结构

8. 最佳实践

1. 组件拆分原则：

   // 自定义按钮组件
   @Component
   struct MyButton {
     private onClick: () => void
    
     build() {
       Button('自定义按钮')
         .onClick(this.onClick)
     }
   }
   

2. 状态管理优化：

   • 使用@Prop实现父子组件通信
   • 复杂场景使用@Observed和@ObjectLink

3. 性能优化：

   • 避免在build()中进行耗时操作
   • 合理使用条件渲染和列表渲染

通过以上步骤，可以快速上手ArkTS的UI开发。建议从简单组件开始，逐步尝试复杂布局和状态管理，结合官方文档中的组件API参考，持续提升开发效率。