ArkUI常用的组件

ArkUI 常用组件大全

ArkUI 作为 HarmonyOS 的应用开发框架，提供了丰富的组件用于构建用户界面。以下是 ArkUI 中最常用的组件分类及其核心功能：

一、基础组件

1. 文本显示

• Text：显示文本内容

  Text('Hello ArkUI').fontSize(20).fontColor(Color.Blue)
  

2. 按钮

• Button：可点击的交互按钮

  Button('点击我').onClick(() => { /* 点击事件 */ })
  

3. 图片

• Image：显示图片资源

  Image($r('app.media.logo')).width(100).height(100)
  

4. 输入框

• TextInput：文本输入框

  TextInput({ placeholder: '请输入' }).onChange((value: string) => { /* 输入变化 */ })
  

二、布局组件

1. 线性布局

• Column：垂直排列子组件

  Column() {Text('第一行')Text('第二行')
  }
  

• Row：水平排列子组件

  Row() {Text('左')Text('右')
  }
  

2. 弹性布局

• Flex：弹性盒子布局

  Flex({ direction: FlexDirection.Row }) {Text('弹性项1').flexGrow(1)Text('弹性项2').flexGrow(2)
  }
  

3. 层叠布局

• Stack：子组件层叠排列

  Stack() {Image('bg.jpg')Text('覆盖文本')
  }
  

三、列表与网格

1. 列表

• List：高性能滚动列表

  List() {ForEach(items, (item) => {ListItem() {Text(item.name)}})
  }
  

2. 网格

• Grid：网格布局

  Grid() {ForEach(items, (item) => {GridItem() {Image(item.image)}})
  }
  

四、容器组件

1. 选项卡

• Tabs + TabContent：选项卡式布局

  Tabs() {TabContent() { /* 内容1 */ }.tabBar('标签1')TabContent() { /* 内容2 */ }.tabBar('标签2')
  }
  

2. 滚动容器

• Scroll：可滚动内容区域

  Scroll() {Column() { /* 长内容 */ }
  }
  

3. 导航容器

• Navigation：页面导航容器

  Navigation() {Column() { /* 主内容 */ }
  }
  .title('首页')
  

五、交互组件

1. 选择器

• Radio：单选按钮

  Radio({ value: 'opt1', group: 'group1' })
  

• Checkbox：复选框

  Checkbox({ name: 'agree', group: 'terms' })
  

2. 开关

• Toggle：开关切换

  Toggle({ type: ToggleType.Switch })
  

3. 滑块

• Slider：数值选择滑块

  Slider({ value: 50, min: 0, max: 100 })
  

六、多媒体组件

1. 视频播放

• Video：视频播放器

  Video({ src: 'video.mp4' })
  

2. 音频播放

• AudioPlayer：音频播放控制

  AudioController.createAudioPlayer()
  

七、图表与进度

1. 进度条

• Progress：进度显示

  Progress({ value: 30, total: 100 })
  

2. 评分

• Rating：星级评分

  Rating({ rating: 3.5 })
  

八、高级功能组件

1. 画布

• Canvas：自定义绘制

  Canvas(this.context).width(300).height(300).onReady(() => { /* 绘制操作 */ })
  

2. Web组件

• Web：内嵌网页

  Web({ src: 'https://example.com' })
  

九、功能型组件

1. 对话框

• AlertDialog：提示对话框

  AlertDialog.show({title: '提示',message: '确认操作?',buttons: [{text: '确认',action: () => { /* 确认操作 */ }}]
  })
  

2. 下拉菜单

• Select：下拉选择器

  Select(options).onSelect((index: number) => { /* 选择回调 */ })
  

十、动画组件

1. 属性动画

• animateTo：属性动画

  animateTo({duration: 1000,curve: Curve.EaseInOut
  }, () => {this.angle = 360
  })
  

2. 转场动画

• Transition：组件过渡动画

  Transition({ type: TransitionType.Insert })
  

组件选择建议

1. 布局优先：先确定布局结构（Column/Row/Flex/Stack）
2. 内容填充：添加内容组件（Text/Image）
3. 交互增强：加入交互组件（Button/Input）
4. 列表优化：大数据使用List+LazyForEach
5. 导航设计：复杂应用使用Navigation+Tabs

以上组件覆盖了应用开发的大部分场景，开发者可以根据具体需求选择合适的组件组合。ArkUI 的组件设计遵循声明式语法，通过链式调用可以方便地设置各种属性和样式。