← 返回首页

ArkTS

🧩 ArkUI 组件集合

系统学习HarmonyOS ArkUI的各种基础组件和高级组件的使用方法

API级别: API 9+ | 项目路径: HarmonyOS_NEXT/ArkUI/ComponentCollection

📋 项目简介

ArkUI组件集合示例是HarmonyOS官方提供的UI组件学习示例，涵盖了ArkTS语言开发中常用的各种UI组件和布局方式。

🏗️ 项目结构

ComponentCollection/
├── entry/src/main/ets/
│   ├── Application/      # 应用级配置
│   ├── common/          # 公共组件
│   ├── data/            # 数据定义
│   ├── model/           # 数据模型
│   ├── pages/           # 页面
│   │   ├── animations/  # 动画示例
│   │   ├── components/  # 组件示例
│   │   └── universal/   # 通用属性
│   └── util/            # 工具类
└── resources/           # 资源文件

💻 核心代码示例

1. Tabs 导航组件

@Entry
@Component
struct Index {
  @State tabsIndex: number = 0

  build() {
    Tabs({ barPosition: BarPosition.End }) {
      ForEach(COLLECTION_CATEGORIES, (item: FirstLevelCategory) => {
        TabContent() {
          TabContentNavigation({ categories: item.childNodes })
        }
        .tabBar(this.TabBarBuilder(item.selectedImage, item.unselectedImage, item.tabBarName))
      })
    }
    .barHeight(56)
    .backgroundColor($r('app.color.background_shallow_grey'))
  }
}

2. List 列表组件

List({ space: 10 }) {
  ForEach(this.dataArray, (item: ItemData) => {
    ListItem() {
      Column() {
        Text(item.title).fontSize(20)
      }
    }
    .backgroundColor($r('app.color.white'))
    .borderRadius(10)
  }, item => item.id)
}
.width('90%')
.height('80%')

3. Grid 网格组件

Grid() {
  ForEach(this.icons, (icon: IconData) => {
    GridItem() {
      Column() {
        Image(icon.src).width(40)
        Text(icon.title).fontSize(14).margin({ top: 10 })
      }
    }
  }, icon => icon.id)
}
.columnsTemplate('1fr 1fr 1fr')
.rowsGap(20)
.columnsGap(20)

🔧 状态管理

装饰器	说明	示例
@State	组件状态	@State count: number = 0
@Prop	属性传递(单向)	@Prop title: string
@Link	双向绑定	@Link isPlaying: boolean
@StorageLink	本地存储	@StorageLink('theme') theme: string
@Watch	状态监听	@Watch('onChange') value: string

📚 常用组件属性

分类	属性	说明
布局	width/height	尺寸
布局	padding/margin	间距
布局	layoutWeight	权重
样式	backgroundColor	背景色
样式	borderRadius	圆角
交互	.onClick()	点击事件
交互	.gesture()	手势

📖 学习建议

🔗 参考资料

📎 官方仓库链接