第4章：UI组件基础

常用基本组件

1. 文本组件（Text）

功能：用于显示静态或动态文本内容
核心属性：
- fontSize：设置字体大小（如：16fp）
- fontColor：设置文本颜色（如：#FF0000）
- fontWeight：设置字体粗细（如：FontWeight.Bold）

示例代码：

Text('Hello ArkTS')
  .fontSize(20)
  .fontColor(Color.Black)

2. 按钮组件（Button）

功能：触发用户交互事件
核心特性：
- 支持多种样式类型（胶囊/圆形/文本按钮）
- 点击事件绑定：onClick(() => { ... })
状态控制：
- enabled：禁用/启用状态
- stateEffect：按压态效果

示例：

Button('Submit', { type: ButtonType.Capsule })
  .onClick(() => {
    console.log('Button clicked!')
  })

3. 图片组件（Image）

资源加载方式：
- 本地资源：$r('app.media.icon')
- 网络图片：'https://example.com/image.png'
常用属性：
- width/height：尺寸控制
- objectFit：缩放模式（Contain/Cover/Fill等）
- alt：加载失败时的替代文本

4. 输入框组件（TextInput）

输入类型：
- 普通文本：type: InputType.Normal
- 密码输入：type: InputType.Password
- 数字键盘：type: InputType.Number
事件监听：
- onChange：内容变化回调
- onSubmit：提交事件

示例：

TextInput({ placeholder: 'Enter text' })
  .onChange((value: string) => {
    console.log('Current input:', value)
  })

5. 选择器组件（Picker）

支持类型：
- 日期选择器：DatePicker
- 时间选择器：TimePicker
- 普通选项选择器：TextPicker

数据绑定：

TextPicker({ range: ['Option1', 'Option2'] })
  .onChange((index: number) => {
    console.log('Selected index:', index)
  })

6. 进度指示器

进度条（Progress）：
- 线性进度条：Progress({ value: 0.5, total: 1.0 })
- 环形进度条：添加style: ProgressStyle.Ring
加载指示器（LoadingProgress）：
```
LoadingProgress()
  .color(Color.Blue)
```

7. 开关组件（Toggle）

类型：
- 复选框：Toggle({ type: ToggleType.Checkbox })
- 单选框：Toggle({ type: ToggleType.Radio })
- 开关按钮：Toggle({ type: ToggleType.Switch })

状态绑定：

@State isChecked: boolean = false

Toggle({ type: ToggleType.Switch, isOn: this.isChecked })
  .onChange((isOn: boolean) => {
    this.isChecked = isOn
  })

组件组合示例

Column() {
  Text('User Login').fontSize(24)
  TextInput({ placeholder: 'Username' })
  TextInput({ placeholder: 'Password', type: InputType.Password })
  Button('Login', { type: ButtonType.Capsule })
    .margin({ top: 20 })
}
.padding(20)

最佳实践提示：
使用Flex/Column/Row等布局组件合理组织基本组件
通过@Styles复用组件样式
对于高频交互组件，建议使用@State管理状态变化