📘 鸿蒙UI组件库 自定义开发实战

01 鸿蒙UI组件库概述

组件库价值 ArkUI框架 自定义流程 生态介绍

02 开发环境搭建

DevEco Studio SDK配置 模拟器调试 项目结构

03 ArkTS语言基础

TS快速回顾 ArkTS语法 声明式UI @State/@Prop

04 基础组件封装 (一) Text

二次封装 字体/颜色 点击回调 富文本样式

05 基础组件封装 (二) Button

多主题色 loading状态 图标+文字 点击反馈

06 基础组件封装 (三) Image

占位图 圆角裁剪 缓存策略 网络图片

07 布局组件封装 (一) Flex

主轴/交叉轴 换行间距 响应式 弹性布局

08 布局组件封装 (二) Grid

动态列数 跨列跨行 瀑布流 网格系统

09 布局组件封装 (三) Stack

层级管理 定位模式 动画过渡 层叠布局

10 表单组件封装 (一) Input

前缀图标 清除按钮 密码切换 正则校验

11 表单组件封装 (二) Picker

单列/多列 级联选择 自定义样式 数据驱动

12 表单组件封装 (三) Switch

轨道颜色 文字标签 禁用状态 交互反馈

13 反馈组件封装 (一) Toast

多种位置 自定义时长 图标组合 轻提示

14 反馈组件封装 (二) Dialog

标题/内容 按钮组 拖拽关闭 动画

15 反馈组件封装 (三) Loading

全屏/内联 自定义动画 进度显示 加载状态

16 导航组件封装 (一) TabBar

底部/顶部 角标 滑动切换 标签栏

17 导航组件封装 (二) Navigation

标题居中/左 返回按钮 右侧操作 导航栏

18 导航组件封装 (三) SideBar

展开/收起 菜单层级 自定义头部 侧边栏

19 数据展示 (一) List

下拉刷新 上拉加载 滑动删除 空状态

20 数据展示 (二) Card

阴影圆角 头尾插槽 点击反馈 卡片封装

21 数据展示 (三) Badge

数字/红点 位置偏移 动画效果 徽标

22 数据展示 (四) Progress

线性/环形 渐变色 动画过渡 进度条

23 图表组件封装 (一) 柱状图

数据绑定 坐标轴 点击高亮 柱状图

24 图表组件封装 (二) 折线图

平滑曲线 数据点标记 区域填充 折线图

25 图表组件封装 (三) 饼图

扇形角度 标签显示 选中分离 饼图

26 动画与交互封装

入场/离场 手势识别 拖拽排序 弹簧动画

27 主题与样式管理

主题色系统 暗黑模式 动态切换 样式变量

28 组件库打包与发布

模块化结构 ohpm管理 版本号 发布仓库

29 组件库文档与示例

JSDoc文档 使用示例 在线文档站 自动化测试

30 综合实战 · 电商App

组件库应用 性能优化 迭代维护 课程总结