# ArkUI_Component

**Repository Path**: J-Design/ArkUI_Component

## Basic Information

- **Project Name**: ArkUI_Component
- **Description**: ArkUI组件库示例App。可以在预览器或真机中，实时预览组件接口、属性调整的效果。
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 140
- **Forks**: 48
- **Created**: 2023-11-29
- **Last Updated**: 2026-09-23

## Categories & Tags

**Categories**: harmonyos-advanced

**Tags**: HarmonyOS

## README

# ArkUI_Component

#### 简介
![demo](readmeImage/image01.jpg)

ArkUI 组件库示例 App。覆盖基础组件、信息展示、信息输入、功能控件、容器、弹窗、绘制与官方高级组件，可在预览器或真机中实时预览组件接口与属性调整效果。

- 环境：**HarmonyOS 26.0.0（API 26）**，ArkTS 声明式开发范式
- 路由：`Navigation` + `NavPathStack` + 系统路由表（`route_map.json`）
- 首页：顶部横向滚动 Tab，按分类切换，覆盖 **80** 个组件示例页

## 目录结构

```
entry/src/main/ets/
├── common/                     通用基础设施与数据模型
│   ├── AppPathStack.ets            全局导航栈
│   ├── CategoryModel.ets           首页分类模型
│   ├── PagesPathModel.ets          页面条目模型
│   └── ValueObject.ets             通用键值模型
├── catalog/                    首页目录数据（文件名 = 分类 slug，与 pages/ 一一对应）
│   ├── categories.ets              分类聚合入口（Index 只依赖它）
│   └── basic / display / input / functional / container / dialog / draw / advanced
├── components/                 可复用 UI 组件
│   ├── config/                     配置面板控件：ConfigSlider / ConfigSwitch / ConfigSelect
│   ├── list/ListItemCustom.ets     首页列表项
│   └── title/Title.ets、TitleTab.ets   页面标题栏与页签
├── entryability/EntryAbility.ets
└── pages/                      目录 = 首页 Tab 分类，1:1 对应
    ├── Index.ets                   首页（Navigation 根容器）
    ├── basic/       (5)   基础组件
    ├── display/     (12)  信息展示
    ├── input/       (15)  信息输入
    ├── functional/  (12)  功能控件
    ├── container/   (23)  容器
    ├── dialog/      (6)   弹窗
    ├── draw/        (1)   绘制
    └── advanced/    (6)   高级组件
```

## 组件覆盖

### 基础组件（5） · `pages/basic/`

- Button 按钮
- Text 文本
- Divider 分隔器
- Blank 自动占位
- Hyperlink 超链接

### 信息展示（12） · `pages/display/`

- Image 图片
- Span 行内文本
- ImageAnimator 帧动画
- LoadingProgress 加载
- Progress 进度条
- QRCode 二维码
- Marquee 跑马灯
- DataPanel 数据面板
- Gauge 数据量规
- SymbolGlyph 符号图标
- SymbolSpan 行内符号
- AlphabetIndexer 字母索引

### 信息输入（15） · `pages/input/`

- TextInput 单行文本输入
- TextArea 多行文本输入
- Toggle 开关
- Slider 滑动条
- Rating 评分
- Select 下拉选择
- TextPicker 选择文本
- Radio 单选框
- Checkbox 多选框
- CheckboxGroup 多选框组
- DatePicker 日期选择
- TimePicker 时间选择
- RichEditor 富文本编辑
- CalendarPicker 日历选择
- UIPickerComponent 通用选择器

### 功能控件（12） · `pages/functional/`

- Menu 菜单
- Search 搜索框
- TextClock 文本时钟
- TextTimer 计时器
- Swiper 步骤导航
- PatternLock 密码锁
- SegmentButton 分段按钮
- Chip 标签
- ChipGroup 标签组
- Refresh 下拉刷新
- ScrollBar 滚动条
- WithTheme 主题作用域

### 容器（23） · `pages/container/`

- Column 垂直容器
- Row 水平容器
- Stack 堆叠容器
- Flex 弹性布局
- List 列表容器
- Grid 网格容器
- Swiper 滑块视图
- Tabs 页签
- Badge 信息标记
- Counter 计数器
- bindSheet 滑动面板
- Scroll 滚动容器
- SideBarContainer 侧边栏
- RelativeContainer 相对布局
- GridRow / GridCol 栅格布局
- WaterFlow 瀑布流
- ListItemGroup 列表分组
- TabContent 页签内容
- ColumnSplit 纵向分割
- RowSplit 横向分割
- FolderStack 折叠悬停布局
- IndicatorComponent 指示器
- LazyVGridLayout 懒加载网格

### 弹窗（6） · `pages/dialog/`

- AlertDialog 警告弹窗
- ActionSheet 列表选择弹窗
- CustomDialog 自定义弹窗
- DatePickerDialog 日期选择弹窗
- TimePickerDialog 时间选择弹窗
- TextPickerDialog 文本选择弹窗

### 绘制（1） · `pages/draw/`

- Circle 圆形

### 高级组件（6） · `pages/advanced/`

- Navigation 路由导航
- ComposeListItem 组合列表项
- TipsDialog 上图下文弹窗
- ConfirmDialog 确认弹窗
- SwipeRefresher 高级刷新
- ProgressButton 进度按钮
## 新增示例页的约定

新增一个组件页需要**同时改三处**，缺一处就会出现"孤儿页面"或"悬空路由"：

| # | 位置 | 内容 |
|---|---|---|
| 1 | `pages/<分类>/<X>Page.ets` | 页面文件：`@Builder export function <X>PageBuilder()` + `@Component export struct <X>Page`，根节点 `NavDestination` |
| 2 | `catalog/<分类>.ets` | 追加 `{ name: '<中文名> 组件名', address: '<X>Page' }` |
| 3 | `resources/base/profile/route_map.json` | 追加 `{ name, pageSourceFile, buildFunction }` |

改完后请校验：`catalog` 与 `route_map` 的条目集合必须完全相等，且 `pageSourceFile` 与实际目录一致。

## 已废弃组件（不收录）

`GridContainer`(9) · `Navigator`(13) · `NavRouter`(13) · `Panel`(12，已改用 `bindSheet`) · `Stepper`/`StepperItem`(22，已改用 `Swiper`)