ArkUI是鸿蒙专门用于构建鸿蒙应用的UI框架，提供基于ArkTS的声明式开发范式和兼容JS的类Web开发范式，这里我们使用的基于 ArkTS 的声明式开发范式，建议有Java、TS等基础在接触。

一、ArkUI声明式开发范式概述

1.1 核心特点

• 声明式语法：通过描述UI状态而非操作步骤来构建界面3
• 数据驱动UI：UI随数据变化自动更新，无需手动操作DOM
• 组件化开发：UI被拆分为独立的可复用组件4
• 高性能渲染：采用高效Diff算法，只更新变化的部分

1.2 基本语法结构

@Entry
@Component
struct Index {
  @State count: number = 0;  // 响应式状态变量
  
  build() {
    Column() {
      Text(`Count: ${this.count}`)
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
      
      Button('增加')
        .onClick(() => {
          this.count++;  // 状态变更自动触发UI更新
        })
        .width(100)
        .height(40)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

二、页面结构组成

2.1 自定义组件的基本结构

// 1. 装饰器：赋予特殊含义
@Entry                    // 入口组件，页面根节点
@Component                // 自定义组件标识
struct MyComponent {      // 组件结构体
  // 2. 状态变量
  @State message: string = 'Hello ArkUI';
  
  // 3. UI描述（必须）
  build() {
    // 4. 容器组件（必须且唯一）
    Column() {
      // 5. 内置组件
      Text(this.message)
        .fontSize(20)
        .fontColor(Color.Red)
      
      // 6. 属性方法（链式调用）
      Button('点击')
        .width(120)
        .height(48)
        .backgroundColor(Color.Blue)
        // 7. 事件方法
        .onClick(() => {
          this.message = '按钮已点击';
        })
    }
    // 容器属性设置
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

2.2 组件生命周期

@Entry
@Component
struct LifecycleComponent {
  @State textColor: Color = Color.Black;
  
  // 页面特有生命周期
  onPageShow() {
    console.info('页面显示');
    this.textColor = Color.Blue;
  }
  
  onPageHide() {
    console.info('页面隐藏');
  }
  
  onBackPress() {
    console.info('返回按钮点击');
    return true; // true:自定义处理，false:默认路由返回
  }
  
  // 组件生命周期
  aboutToAppear() {
    console.info('组件即将显示');
  }
  
  aboutToDisappear() {
    console.info('组件即将消失');
  }
  
  build() {
    Column() {
      Text('生命周期示例')
        .fontColor(this.textColor)
        .fontSize(30)
    }
    .width('100%')
  }
}

三、布局容器选择与使用

3.1 线性布局（Row/Column） - 最常用

// 垂直布局
Column({ space: 10 }) {  // space: 子组件间距
  Text('顶部文本')
    .fontSize(18)
  
  Text('中间文本')
    .fontSize(16)
    .fontColor(Color.Gray)
  
  Text('底部文本')
    .fontSize(14)
}
.width('100%')
.height(200)
.backgroundColor('#F5F5F5')
.justifyContent(FlexAlign.Center)  // 主轴对齐
.alignItems(HorizontalAlign.Center) // 交叉轴对齐

// 水平布局
Row({ space: 20 }) {
  Button('取消')
    .width(80)
    .height(40)
  
  Button('确认')
    .width(80)
    .height(40)
    .backgroundColor('#007AFF')
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)  // 两端对齐

3.2 弹性布局（Flex） - 灵活比例分配

Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
  Image($r('app.media.avatar'))
    .width(50)
    .height(50)
    .borderRadius(25)
  
  Column() {
    Text('用户名')
      .fontSize(16)
      .fontWeight(FontWeight.Bold)
    
    Text('在线状态')
      .fontSize(12)
      .fontColor(Color.Gray)
  }
  .layoutWeight(1)  // 占据剩余空间
  .margin({ left: 12 })
  
  Text('10:30')
    .fontSize(12)
    .fontColor(Color.Gray)
}
.width('100%')
.padding({ left: 16, right: 16, top: 12, bottom: 12 })

3.3 层叠布局（Stack） - 叠加效果

Stack({ alignContent: Alignment.BottomEnd }) {
  Image($r('app.media.product'))
    .width('100%')
    .height(200)
    .objectFit(ImageFit.Cover)
  
  // 叠加在图片上的标签
  Text('新品')
    .fontSize(12)
    .fontColor(Color.White)
    .backgroundColor('#FF4400')
    .padding({ horizontal: 8, vertical: 4 })
    .borderRadius(4)
    .margin({ right: 12, bottom: 12 })
}
.width('100%')
.height(200)

3.4 列表布局（List） - 长列表展示

@State items: string[] = ['项目1', '项目2', '项目3', '项目4', '项目5'];

List({ space: 10 }) {
  ForEach(this.items, (item: string, index: number) => {
    ListItem() {
      Row() {
        Text(`${index + 1}. ${item}`)
          .fontSize(16)
          .layoutWeight(1)
        
        Image($r('app.media.arrow_right'))
          .width(16)
          .height(16)
      }
      .width('100%')
      .padding(16)
      .backgroundColor(Color.White)
      .borderRadius(8)
    }
  }, (item: string) => item)
}
.width('100%')
.height('100%')
.padding(10)

3.5 网格布局（Grid） - 网格展示

Grid() {
  ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (item: number) => {
    GridItem() {
      Column({ space: 8 }) {
        Image($r('app.media.icon'))
          .width(60)
          .height(60)
          .borderRadius(8)
        
        Text(`功能${item}`)
          .fontSize(12)
      }
      .width('100%')
      .height(100)
      .justifyContent(FlexAlign.Center)
      .alignItems(HorizontalAlign.Center)
      .backgroundColor(Color.White)
      .borderRadius(12)
    }
  })
}
.columnsTemplate('1fr 1fr 1fr')  // 3列等宽
.columnsGap(12)
.rowsGap(12)
.padding(16)

四、常用组件搭配示例

4.1 登录页面示例

@Entry
@Component
struct LoginPage {
  @State username: string = '';
  @State password: string = '';
  @State rememberMe: boolean = false;
  
  build() {
    Column({ space: 24 }) {
      // 标题区域
      Column({ space: 8 }) {
        Text('欢迎登录')
          .fontSize(28)
          .fontWeight(FontWeight.Bold)
        
        Text('请输入您的账号和密码')
          .fontSize(14)
          .fontColor('#666666')
      }
      .width('100%')
      .alignItems(HorizontalAlign.Center)
      .margin({ top: 60, bottom: 40 })
      
      // 表单区域
      Column({ space: 16 }) {
        // 用户名输入
        Column({ space: 8 }) {
          Text('用户名')
            .fontSize(14)
            .fontColor('#333333')
            .width('100%')
          
          TextInput({ placeholder: '请输入用户名' })
            .width('100%')
            .height(48)
            .borderRadius(8)
            .border({ width: 1, color: '#E5E5E5' })
            .padding({ left: 16 })
            .onChange((value: string) => {
              this.username = value;
            })
        }
        
        // 密码输入
        Column({ space: 8 }) {
          Text('密码')
            .fontSize(14)
            .fontColor('#333333')
            .width('100%')
          
          TextInput({ 
            placeholder: '请输入密码',
            type: InputType.Password 
          })
            .width('100%')
            .height(48)
            .borderRadius(8)
            .border({ width: 1, color: '#E5E5E5' })
            .padding({ left: 16 })
            .onChange((value: string) => {
              this.password = value;
            })
        }
        
        // 记住我选项
        Row() {
          Toggle({ type: ToggleType.Checkbox })
            .isOn(this.rememberMe)
            .onChange((value: boolean) => {
              this.rememberMe = value;
            })
          
          Text('记住我')
            .fontSize(14)
            .fontColor('#666666')
            .margin({ left: 8 })
        }
        .width('100%')
        .justifyContent(FlexAlign.Start)
        
        // 登录按钮
        Button('登录')
          .width('100%')
          .height(48)
          .backgroundColor('#007AFF')
          .fontColor(Color.White)
          .fontSize(16)
          .borderRadius(8)
          .onClick(() => {
            // 处理登录逻辑
            console.log('用户名:', this.username);
            console.log('密码:', this.password);
          })
          .margin({ top: 24 })
      }
      .width('80%')
      
      // 底部链接
      Row({ space: 20 }) {
        Text('忘记密码？')
          .fontSize(14)
          .fontColor('#007AFF')
          .onClick(() => {
            // 跳转到忘记密码页面
          })
        
        Text('注册账号')
          .fontSize(14)
          .fontColor('#007AFF')
          .onClick(() => {
            // 跳转到注册页面
          })
      }
      .margin({ top: 40 })
    }
    .width('100%')
    .height('100%')
    .padding(20)
    .backgroundColor('#FFFFFF')
  }
}

4.2 商品卡片组件

@Component
struct ProductCard {
  @Prop name: string = '';
  @Prop price: number = 0;
  @Prop imageUrl: Resource = $r('app.media.default');
  @State isFavorite: boolean = false;
  
  build() {
    Column({ space: 12 }) {
      // 商品图片区域
      Stack() {
        Image(this.imageUrl)
          .width('100%')
          .height(150)
          .objectFit(ImageFit.Cover)
          .borderRadius(8)
        
        // 收藏按钮
        Image(this.isFavorite ? $r('app.media.heart_filled') : $r('app.media.heart'))
          .width(24)
          .height(24)
          .margin({ top: 8, right: 8 })
          .onClick(() => {
            this.isFavorite = !this.isFavorite;
          })
          .align(Alignment.TopEnd)
      }
      .width('100%')
      .height(150)
      
      // 商品信息
      Column({ space: 4 }) {
        Text(this.name)
          .fontSize(14)
          .fontWeight(FontWeight.Medium)
          .maxLines(2)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .width('100%')
        
        Row() {
          Text(`¥${this.price}`)
            .fontSize(16)
            .fontColor('#FF4400')
            .fontWeight(FontWeight.Bold)
          
          Text('已售1000+')
            .fontSize(12)
            .fontColor('#999999')
            .margin({ left: 8 })
        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceBetween)
      }
      .width('100%')
      
      // 加入购物车按钮
      Button('加入购物车')
        .width('100%')
        .height(32)
        .fontSize(12)
        .backgroundColor('#FF4400')
        .fontColor(Color.White)
        .borderRadius(16)
    }
    .width(160)
    .padding(8)
    .backgroundColor(Color.White)
    .borderRadius(12)
    .shadow({ radius: 4, color: '#1A000000', offsetY: 2 })
  }
}

// 使用示例
@Entry
@Component
struct ProductList {
  private products = [
    { name: '华为手机', price: 3999, image: 'product1' },
    { name: '鸿蒙平板', price: 2499, image: 'product2' },
    { name: '智能手表', price: 1299, image: 'product3' },
  ];
  
  build() {
    Column() {
      Text('热门商品')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .margin({ left: 16, top: 16, bottom: 12 })
        .width('100%')
      
      Scroll() {
        Row({ space: 12 }) {
          ForEach(this.products, (item: any) => {
            ProductCard({
              name: item.name,
              price: item.price,
              imageUrl: $r(`app.media.${item.image}`)
            })
          })
        }
        .padding({ horizontal: 16 })
        .wrap(true)  // 自动换行
      }
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
  }
}

五、页面构建最佳实践

5.1 布局选择原则

1. 线性布局优先：简单排列使用Column/Row
2. 弹性布局：需要按比例分配空间时使用Flex
3. 列表/网格：展示结构化数据时使用List/Grid
4. 层叠布局：需要重叠效果时使用Stack
5. 相对布局：复杂定位时使用RelativeContainer

5.2 性能优化建议

// 1. 使用LazyForEach优化长列表
List() {
  LazyForEach(this.dataSource, (item: ItemType) => {
    ListItem() {
      // 列表项内容
    }
  }, (item: ItemType) => item.id.toString())
}

// 2. 避免深层嵌套（建议不超过3层）
Column() {          // 第1层
  Row() {           // 第2层
    Column() {      // 第3层 - 合理
      // 内容
    }
  }
}

// 3. 使用@Builder复用UI片段
@Builder
function ItemBuilder(content: string) {
  Row() {
    Text(content)
      .fontSize(16)
    Image($r('app.media.icon'))
      .width(20)
      .height(20)
  }
}

// 4. 使用@Styles复用样式
@Styles
function cardStyle() {
  .backgroundColor(Color.White)
  .borderRadius(12)
  .padding(16)
  .shadow({ radius: 4, color: '#1A000000', offsetY: 2 })
}

// 使用
Column() {
  Text('卡片标题')
    .fontSize(18)
    .fontWeight(FontWeight.Bold)
}
.cardStyle()  // 应用样式

5.3 响应式布局示例

@Entry
@Component
struct ResponsiveLayout {
  @State isWideScreen: boolean = false;
  // 状态：控制移动端抽屉菜单的显隐
  @State isDrawerOpen: boolean = false;

  aboutToAppear() {
    // 初始化时判断屏幕尺寸
    this.isWideScreen = window.innerWidth > 800;
    // 实际项目中应使用媒体查询API，例如：mediaquery.matchMediaSync
  }

  build() {
    // 根据屏幕宽度选择不同布局
    if (this.isWideScreen) {
      return this.buildWideLayout();
    } else {
      return this.buildNarrowLayout();
    }
  }

  @Builder
  buildWideLayout() {
    Row() {
      // 侧边栏 (常驻显示)
      Column() {
        Text('导航菜单')
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
        ForEach(['首页', '发现', '消息', '我的'], (item: string) => {
          Text(item)
            .fontSize(16)
            .margin({ top: 12 })
            .width('100%')
            .textAlign(TextAlign.Start)
        })
      }
      .width(200)
      .backgroundColor('#F5F5F5')
      .padding(16)

      // 主内容区
      Column() {
        Text('宽屏模式 - 主要内容区')
          .fontSize(24)
          .margin({ bottom: 20 })
        Text('这是为平板或桌面设备优化的布局，侧边栏常驻显示。')
      }
      .layoutWeight(1) // 占据剩余所有空间
      .padding(24)
    }
    .width('100%')
    .height('100%')
  }

  @Builder
  buildNarrowLayout() {
    // 使用Stack层叠布局，将抽屉菜单覆盖在主内容之上
    Stack({ alignContent: Alignment.Start }) {
      // 主内容 Column
      Column() {
        // 顶部导航栏
        Row() {
          // 汉堡菜单图标，点击打开抽屉
          Image($r('app.media.ic_menu')) // 请替换为您的菜单图标资源
            .width(24)
            .height(24)
            .onClick(() => {
              this.isDrawerOpen = true; // 点击后打开抽屉
            })

          Text('应用标题')
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .layoutWeight(1)
            .textAlign(TextAlign.Center)

          // 占位，使标题居中
          Blank()
            .width(24)
        }
        .width('100%')
        .height(56)
        .padding({ left: 16, right: 16 })
        .backgroundColor('#FFFFFF')
        .zIndex(1) // 确保顶部导航栏在最上层

        // 主内容区
        Scroll() {
          Column() {
            Text('窄屏模式 - 主要内容区')
              .fontSize(20)
              .margin({ bottom: 15 })
            Text('这是为手机设备优化的布局。点击左上角菜单图标可打开导航抽屉。')
            // ... 您可以在此添加更多主要内容组件
          }
          .width('100%')
          .padding(16)
        }
        .layoutWeight(1)
        .width('100%')

      }
      .width('100%')
      .height('100%')

      // 抽屉菜单 (Conditional rendering)
      if (this.isDrawerOpen) {
        // 半透明遮罩层，点击可关闭抽屉
        Blank()
          .width('100%')
          .height('100%')
          .backgroundColor(0x000000)
          .opacity(0.3)
          .onClick(() => {
            this.isDrawerOpen = false;
          })
          .zIndex(2)

        // 抽屉内容面板
        Column() {
          Text('导航菜单')
            .fontSize(18)
            .fontWeight(FontWeight.Bold)
            .margin({ top: 50, bottom: 20, left: 16 }) // 为状态栏留出空间

          ForEach(['首页', '发现', '消息', '我的'], (item: string) => {
            Text(item)
              .fontSize(16)
              .margin({ top: 15, left: 16 })
              .width('100%')
              .textAlign(TextAlign.Start)
              .onClick(() => {
                console.log(`跳转到: ${item}`);
                this.isDrawerOpen = false; // 选择菜单项后关闭抽屉
              })
          })
        }
        .width('70%') // 抽屉宽度为屏幕的70%
        .height('100%')
        .backgroundColor('#F5F5F5')
        .alignItems(HorizontalAlign.Start)
        .zIndex(3) // 确保抽屉在最顶层
      }
    }
    .width('100%')
    .height('100%')
  }
}

ArkUI 组件速查表

一、行列与堆叠（布局容器类）

组件名称	作用
Flex	弹性布局子组件的容器
Column	垂直方向布局的容器
Row	水平方向布局容器
Stack	层叠布局容器
RelativeContainer	相对布局容器
FolderStack	继承于 Stack(层叠布局)控件，新增了折叠屏悬停能力

二、栅格与分栏（布局容器类）

组件名称	作用
GridRow	栅格布局容器，仅可以和栅格子组件(GridCol)在栅格布局场景中使用
GridCol	栅格子组件，必须作为栅格容器组件(GridRow)的子组件使用
ColumnSplit	将子组件纵向布局，并在每个子组件之间插入一根横向的分割线
RowSplit	将子组件横向布局，并在每个子组件之间插入一根纵向的分割线
SplitLayout	上下结构布局，主要分为上下文本和上下图文两种类型
FoldSplitContainer	折叠屏二分栏、三分栏在展开态、悬停态以及折叠态的区域控制
SideBarContainer	提供侧边栏可以显示和隐藏的侧边栏容器

三、滚动与滑动（布局/交互类）

组件名称	作用
List	列表布局容器
ListItem	用来展示列表具体 item，必须配合 List 来使用
ListItemGroup	用来展示列表 item 分组，必须配合 List 组件来使用
Grid	网格布局容器，由“行”和“列”分割的单元格所组成
GridItem	网格布局容器中单项内容容器
Scroll	可滚动的容器，当子组件的布局尺寸超过父组件的时，可以滚动
Swiper	滑块视图容器，提供子组件滑动轮播显示的能力
WaterFlow	瀑布流容器，由“行”和“列”分割的单元格所组成
FlowItem	瀑布流组件的子组件，用来展示瀑布流具体 item
ScrollBar	滚动条组件，配合可滚动组件使用，如 List、Grid、Scroll、WaterFlow
Refresh	可以进行页面下拉操作并显示刷新动效的容器组件
ComposeListItem	列表包含一系列相同宽度的列表项
GridObjectSortComponent	网格对象的编辑排序，用于网格对象的编辑、拖动排序、新增和删除
SwipeRefresher	内容加载指获取内容并加载出来，常用于衔接展示下拉加载的内容

四、导航与切换（导航交互类）

组件名称	作用
Indicator	导航点组件，提供圆点导航点以及数字导航点两种导航点样式
Navigation	路由导航的根视图容器，一般作为 Page 页面的根容器使用
NavDestination	作为子页面的根容器，用于显示 Navigation 的内容区
MultiNavigation	用于在大尺寸设备上分栏显示、进行路由跳转
Stepper	步骤导航器组件，适用于引导用户按照步骤完成任务的导航场景
StepperItem	用作 Stepper 组件的页面子组件
Tabs	通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图
TabContent	仅在 Tabs 中使用，对应一个切换页签的内容视图

五、按钮与选择（交互选择类）

组件名称	作用
Button	按钮组件，可快速创建不同样式的按钮
Toggle	组件提供勾选框样式、状态按钮样式和开关样式
Checkbox	提供多选框组件，通常用于某选项的打开或关闭
CheckboxGroup	多选框群组，用于控制多选框全选或者不全选状态
CalendarPicker	日历选择器组件，提供下拉日历弹窗，可以让用户选择日期
DatePicker	日期选择器组件，用于根据指定日期范围创建日期滑动选择器
TextPicker	滑动选择文本内容的组件
TimePicker	时间选择组件，根据指定参数创建选择器，支持选择小时及分钟
Radio	单选框，提供相应的用户交互选择项
Rating	提供在给定范围内选择评分的组件(五星评分)
Select	提供下拉选择菜单，可以让用户在多个选项之间选择
Slider	滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景
DownloadFileButton	下载文件按钮，获取到当前应用在 Download 公共目录中所属的存储路径
ProgressButton	文本下载按钮，可显示具体下载进度
SegmentButton	分段按钮组件，包含页签类分段按钮、单选类分段按钮、多选类分段按钮
Filter	多条件筛选，结合具体场景选择合适筛选方式

六、文本与输入（文本交互类）

组件名称	作用
Text	显示一段文本的组件
TextArea	多行文本输入框组件，当输入的文本内容超过组件宽度时会自动换行显示
TextInput	单行文本输入框组件
RichEditor	支持图文混排和文本交互式编辑的组件
Search	搜索框组件，适用于浏览器的搜索内容输入框等应用场景
Span	作为 Text、ContainerSpan 组件的子组件，用于显示行内文本的组件
ImageSpan	Text、ContainerSpan 组件的子组件，用于显示行内图片
ContainerSpan	Text 组件的子组件，用于统一管理多个 Span、ImageSpan 的背景色及圆角弧度
SymbolSpan	作为 Text 组件的子组件，用于显示图标小符号的组件
SymbolGlyph	显示图标小符号的组件
Hyperlink	超链接组件，组件宽高范围内点击实现跳转
RichText	富文本组件，解析并显示 HTML 格式文本
SelectionMenu	文本选择菜单，适用于 RichEditor 组件或 Text 组件

七、图片与视频（媒体展示类）

组件名称	作用
Image	图片组件，常用于在应用中显示图片
ImageAnimator	提供帧动画组件来实现逐帧播放图片的能力，可以配置需要播放的图片列表
Video	用于播放视频文件并控制其播放状态的组件

八、信息展示（数据/信息展示类）

组件名称	作用
AlphabetIndexer	可以与容器组件联动用于按逻辑结构快速定位容器显示区域的组件
Badge	信息标记组件，可以附加在单个组件上用于信息提醒的容器组件
Chip	操作块，用于搜索框历史记录或者邮件发送列表等场景
ChipGroup	ChipGroup 高级组件，提供操作块群组，用于对文件或者资源内容进行分类等场景
Counter	计数器组件，提供相应的增加或者减少的计数操作
advanced.Counter	Counter 是用于精确调节数值的组件
DataPanel	数据面板组件，用于将多个数据占比情况使用占比图进行展示
ExceptionPrompt	异常提示，适用于有异常需要提示异常内容的情况
Gauge	数据量规图表组件，用于将数据展示为环形图表
LoadingProgress	用于显示加载动效的组件
Marquee	跑马灯组件，用于滚动展示一段单行文本
PatternLock	图案密码锁组件，以九宫格图案的方式输入密码，用于密码验证场景
Progress	进度条组件，用于显示内容加载或操作处理等进度
Popup	显示特定样式气泡
QRCode	用于显示单个二维码的组件
TextClock	通过文本将当前系统时间显示在设备上。支持不同时区的时间显示，最高精度到秒级。
TextTimer	通过文本显示计时信息并控制其计时器状态的组件
TreeView	树视图作为一种分层显示的列表，适合显示嵌套结构

九、空白与分隔（布局辅助类）

组件名称	作用
Blank	空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力
Divider	提供分隔器组件，分隔不同内容块/内容元素

十、画布绘制（自定义绘制类）

组件名称	作用
Canvas	提供画布组件，用于自定义绘制图形
CanvasGradient	渐变对象
CanvasPattern	指定图像和重复方式创建图片填充的模板
CanvasRenderingContext2D	使用 RenderingContext 在 Canvas 组件上进行绘制，可以是矩形、文本、图片等
DrawingRenderingContext	在 Canvas 组件上进行绘制，绘制对象可以是矩形、文本、图片等
ImageBitmap	存储 canvas 渲染的像素数据，用于高效加载静态或动态图像资源
ImageData	存储 canvas 渲染的像素数据，存储原始像素数据
Matrix2D	矩阵对象，可以对矩阵进行缩放、旋转、平移等变换
OffscreenCanvas	用于自定义绘制图形
OffscreenCanvasRenderingContext2D	在 Canvas 上进行离屏绘制，绘制对象可以是矩形、文本、图片等
Path2D	路径对象，支持通过对象的接口进行路径的描述，并通过 Canvas 的 stroke 接口或者 fill 接口进行绘制

十一、图形绘制（基础图形类）

组件名称	作用
Circle	用于绘制圆形的组件
Ellipse	椭圆绘制组件
Line	直线绘制组件
Polyline	折线绘制组件
Polygon	多边形绘制组件
Path	路径绘制组件，根据绘制路径生成封闭的自定义形状
Rect	矩形绘制组件
Shape	绘制组件的父组件，父组件中会描述所有绘制组件均支持的通用属性

十二、渲染绘制（高级渲染类）

组件名称	作用
XComponent	提供用于图形绘制和媒体数据写入的 Surface，XComponent 负责将其嵌入到视图中
Component3D	3D 渲染组件，可以加载 3D 模型资源并做自定义渲染，通常用于 3D 动效场景
EmbeddedComponent	用于支持在当前页面嵌入本应用内其他 EmbeddedUIExtensionAbility 提供的 UI

十三、标题栏与工具栏（界面导航类）

组件名称	作用
ComposeTitleBar	一种普通标题栏，支持设置标题、头像和副标题，可用于一级页面、二级及其以上界面配置返回键
EditableTitleBar	编辑型标题栏，适用于多选界面或者内容的编辑界面，一般采取左叉右勾的形式
SelectTitleBar	下拉菜单标题栏包含一个下拉菜单，可用于页面之间的切换；可用于一级页面、二级及其以上界面
TabTitleBar	页签型标题栏，用于页面之间的切换。仅一级页面适用
ToolBar	具栏用于展示针对当前界面内容的操作选项，在界面底部显示
SubHeader	子标题，用于列表项顶部，将该组列表划分为一个区块，子标题名称用来概括该区块内容

十四、菜单（交互菜单类）

组件名称	作用
Menu	以垂直列表形式显示的菜单
MenuItem	用来展示菜单 Menu 中具体的 item 菜单项
MenuItemGroup	该组件用来展示菜单 MenuItem 的分组
ContextMenu	在页面范围内关闭通过 bindContextMenu 属性绑定的菜单

十五、动画（动效类）

组件名称	作用
属性动画 (animation)	组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验
显式动画 (animateTo)	提供全局 animateTo 显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效
关键帧动画 (keyframeAnimateTo)	在 UIContext 中提供 keyframeAnimateTo 接口来指定若干个关键帧状态，实现分段的动画
页面间转场 (pageTransition)	当路由进行切换时，通过在 pageTransition 函数中自定义页面入场和页面退场的转场动效
组件内转场 (transition)	通过 transition 属性配置转场参数，在组件插入和删除时显示过渡动效
共享元素转场 (sharedTransition)	可以通过设置组件的该属性将该元素标记为共享元素并设置对应的共享元素转场动效
组件内隐式共享元素转场 (geometryTransition)	在视图切换过程中提供丝滑的上下文传承过渡
路径动画 (motionPath)	设置组件进行位移动画时的运动路径
粒子动画 (Particle)	在一定范围内随机生成的大量粒子产生运动而组成的动画
显式动画立即下发 (animateToImmediately)	用来提供显式动画立即下发功能。同时加载多个属性动画的情况下，使用该接口可以立即执行闭包代码中状态变化导致的过渡动效

十六、弹窗（交互弹窗类）

组件名称	作用
警告弹窗 (AlertDialog)	显示警告弹窗组件，可设置文本内容与响应回调
列表选择弹窗 (ActionSheet)	列表弹窗
自定义弹窗 (CustomDialog)	显示自定义弹窗。使用弹窗组件时，可优先考虑自定义弹窗，便于自定义弹窗的样式与内容
日历选择器弹窗 (CalendarPickerDialog)	点击日期弹出日历选择器弹窗，可选择弹窗内任意日期
日期滑动选择器弹窗 (DatePickerDialog)	根据指定的日期范围创建日期滑动选择器，展示在弹窗上
时间滑动选择器弹窗 (TimePickerDialog)	以 24 小时的时间区间创建时间滑动选择器，展示在弹窗上
文本滑动选择器弹窗 (TextPickerDialog)	根据指定的选择范围创建文本选择器，展示在弹窗上
弹出框 (Dialog)	一种模态窗口，用于在保持当前的上下文环境时，临时展示用户需关注的信息或待处理的操作，用户在模态弹出框内完成上述交互任务

十七、卡片（卡片交互类）

组件名称	作用
FormLink	提供静态卡片交互组件，用于静态卡片内部和提供方应用间的交互，当前支持 router、message 和 call 三种类型的事件
FormMenu	支持应用内长按菜单快捷添加卡片到桌面

十八、安全（安全控件类）

组件名称	作用
PasteButton	安全控件的粘贴按钮，用户通过点击该粘贴按钮，可以临时获取读取剪贴板权限
SaveButton	安全控件的保存控件，用户通过点击该保存按钮，可以临时获取存储权限，而不需要权限弹框授权确认

十九、主题（主题配置类）

组件名称	作用
WithTheme	用于设置应用局部页面自定义主题风格，可设置子组件深浅色模式和自定义配色

二十、原子化服务（元服务类）

组件名称	作用
AtomicServiceNavigation	作为 Page 页面的根容器使用，其内部默认包含了标题栏、内容区，其中内容区默认首页显示导航内容或非首页显示（NavDestination 的子组件），首页和非首页通过路由进行切换
AtomicServiceTabs	AtomicServiceTabs 高级组件，对 Tabs 组件一些不需提供给用户自定义设计的属性进行简化，限制最多显示 5 个页签，固定页签样式，位置和大小
AtomicServiceWeb	为开发者提供满足定制化诉求的 Web 高阶组件，屏蔽原生 Web 组件中无需关注的接口，并提供 JS 扩展能力
InterstitialDialogAction	InterstitialDialogAction 弹框在元服务中用于在保持当前的上下文环境时，临时展示用户需关注的信息或待处理的操作，用户点击弹框的不同区域可以触发相应的动作
FullScreenLaunchComponent	全屏启动元服务组件，当被拉起方授权使用方可以嵌入式运行元服务时，使用方全屏嵌入式运行元服务；未授权时，使用方跳出式拉起元服务
NavPushPathHelper	当跳转的目标 NavDestination 在不同的 hsp 分包，且未被主包依赖，首次运行元服务只会下载安装主包，需要使用 NavPushPathHelper 先下载安装相应 hsp 分包，再将指定的 NavDestination 页面信息入栈。使 Navigation 支持动态加载 hsp 分包后再跳转

二十一、自定义占位组件（自定义占位类）

组件名称	作用
NodeContainer	基础组件，不支持尾随添加子节点。组件接受一个 NodeController 的实例接口。需要 NodeController 组合使用
ContentSlot	用于渲染并管理 Native 层使用 C-API 创建的组件