第4章：UI组件基础

4.4 组件属性与方法

4.4.1 组件属性的核心概念

ArkTS中的UI组件通过属性（Properties）来定义其外观和行为。属性是组件的可配置参数，通常包括：

基础属性：如宽度、高度、背景色等
布局属性：如flex布局相关参数
交互属性：如点击事件、触摸反馈等

@Component
struct MyComponent {
  @State isActive: boolean = false

  build() {
    Column() {
      Text('Hello ArkTS')
        .fontSize(20)  // 字体大小属性
        .fontColor(this.isActive ? '#FF0000' : '#000000')  // 动态颜色属性
        .onClick(() => {  // 点击事件属性
          this.isActive = !this.isActive
        })
    }
  }
}

4.4.2 常用内置属性分类

1. 样式属性

属性名	类型	说明
width	number	组件宽度
height	number	组件高度
backgroundColor	Color	背景色
opacity	number	透明度(0.0-1.0)

2. 布局属性

属性名	类型	说明
flexGrow	number	弹性布局扩展比例
flexShrink	number	弹性布局收缩比例
alignSelf	ItemAlign	自身对齐方式

3. 事件属性

属性名	类型	说明
onClick	() => void	点击事件回调
onTouch	(event: TouchEvent) => void	触摸事件回调

4.4.3 组件方法的使用

组件方法分为两类：

内置方法：由框架提供的基础功能

TextInput().focus()  // 获取焦点方法
Scroll().scrollTo({x: 0, y: 100})  // 滚动到指定位置

自定义方法：通过@Builder装饰器创建

@Builder function fancyButton(text: string) {
  Button(text)
    .width(100)
    .height(44)
    .borderRadius(22)
}

4.4.4 属性与方法的动态绑定

通过状态管理实现动态响应：

@Component
struct DynamicComponent {
  @State counter: number = 0

  build() {
    Column() {
      Button(`Click ${this.counter}`)
        .onClick(() => {
          this.counter++
        })
        .opacity(this.counter % 2 === 0 ? 1 : 0.7)
    }
  }
}

4.4.5 最佳实践与注意事项

性能优化：
- 避免在build方法中频繁创建匿名函数
- 使用@Prop和@Link实现精确更新
代码组织：
- 相关属性分组设置
- 复杂样式建议使用Style扩展

调试技巧：

Text('Debug')
  .onClick(() => {
    console.log('Current props:', this.$props)
  })

关键提示：ArkTS的属性系统采用链式调用设计，每个属性设置方法都会返回组件实例，支持流畅的API调用风格。