ArkUI 常用组件详解

这是 HarmonyOS 开发入门系列的第二篇，重点放在最常见的基础组件和布局组件上。

基础组件

Text

Text('Hello ArkUI')
  .fontSize(20)
  .fontWeight(FontWeight.Bold)
  .fontColor('#333333')

Image

Image($r('app.media.icon'))
  .width(100)
  .height(100)
  .objectFit(ImageFit.Cover)
  .borderRadius(8)

Button

Button('点击')
  .width('100%')
  .height(44)
  .backgroundColor('#007AFF')
  .onClick(() => {
    console.info('按钮被点击了')
  })

布局组件

Column

Column() {
  Text('第一行')
  Text('第二行')
  Text('第三行')
}
.space(10)
.justifyContent(FlexAlign.Center)

Row

Row() {
  Text('左')
  Text('中')
  Text('右')
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
.alignItems(VerticalAlign.Center)

Stack

Stack() {
  Image($r('app.media.bg'))
  Text('覆盖在图片上的文字')
    .position({ x: 20, y: 20 })
}

使用建议

• 基础组件先掌握尺寸、间距和对齐方式。
• 布局优先保证结构稳定，再处理动效。
• 列表类页面尽量统一组件尺寸和信息层级。

掌握这些常用组件后，就已经足够支撑大多数管理页、内容页和简单业务页的搭建。