设计系统

概述

设计系统模块提供了统一的布局常量、通用属性和基础组件封装，确保应用的视觉一致性和开发效率。

模块组成

模块	职责	主要内容
constants	布局常量	百分比常量、间距常量等
attribute	通用属性	Row/Column 通用属性封装
component	基础组件	Row/Column/Scroll/Spacer 封装

布局常量

百分比常量

提供 0% 到 100% 的百分比常量，步长为 5%：

typescript

import { P0, P5, P10, P25, P50, P75, P100 } from "@core/designsystem";

Column() {
  // ...
}
.width(P100)   // 100%
.height(P50)   // 50%

可用常量

typescript

P0, P5, P10, P15, P20, P25, P30, P35, P40, P45,
P50, P55, P60, P65, P70, P75, P80, P85, P90, P95, P100

基础组件

Row 组件系列

框架提供了 20+ 种 Row 布局组件，覆盖常见的布局场景。所有 Row 组件都支持以下通用参数：

通用参数

参数	类型	默认值	说明
`options`	`RowOptions \| RowOptionsV2`	`{}`	Row 构造参数
`justifyContent`	`FlexAlign`	根据组件而定	主轴对齐方式
`alignItems`	`VerticalAlign`	根据组件而定	交叉轴对齐方式
`widthValue`	`Length \| undefined`	`undefined`	宽度
`heightValue`	`Length \| undefined`	`undefined`	高度
`sizeValue`	`SizeOptions \| undefined`	`undefined`	尺寸（对应官方 size 属性）
`paddingValue`	`Padding \| Length \| LocalizedPadding \| undefined`	`undefined`	内边距
`marginValue`	`Margin \| Length \| LocalizedMargin \| undefined`	`undefined`	外边距
`fillMaxSize`	`boolean`	`false`	是否填充最大宽高
`bgColor`	`ResourceColor \| undefined`	`undefined`	背景颜色
`onTap`	`((event: ClickEvent) => void) \| undefined`	`undefined`	点击事件
`content`	`CustomBuilder`	必填	内容构建函数

RowBase

基础 Row 组件，保留官方 Row 的所有能力：

typescript

import { RowBase } from "@core/designsystem";

RowBase({
  justifyContent: FlexAlign.Start,
  alignItems: VerticalAlign.Top,
  widthValue: "100%",
  paddingValue: 16
}) {
  Text("左侧");
  Text("右侧");
}

RowCenter

横向居中 + 纵向居中：

typescript

import { RowCenter } from "@core/designsystem";

RowCenter({ fillMaxSize: true }) {
  Text("完全居中");
}

RowStartCenter

横向起始 + 纵向居中：

typescript

import { RowStartCenter } from "@core/designsystem";

RowStartCenter() {
  Image($r("app.media.icon")).width(24).height(24);
  Text("左对齐，垂直居中");
}

RowEndCenter

横向末尾 + 纵向居中：

typescript

import { RowEndCenter } from "@core/designsystem";

RowEndCenter() {
  Text("右对齐，垂直居中");
  Image($r("app.media.arrow")).width(16).height(16);
}

RowSpaceBetweenCenter

横向两端分布 + 纵向居中：

typescript

import { RowSpaceBetweenCenter } from "@core/designsystem";

RowSpaceBetweenCenter() {
  Text("左侧");
  Text("右侧");
}

RowSpaceAroundCenter

横向环绕分布 + 纵向居中：

typescript

import { RowSpaceAroundCenter } from "@core/designsystem";

RowSpaceAroundCenter() {
  Text("项目1");
  Text("项目2");
  Text("项目3");
}

RowSpaceEvenlyCenter

横向均分 + 纵向居中：

typescript

import { RowSpaceEvenlyCenter } from "@core/designsystem";

RowSpaceEvenlyCenter() {
  Text("A");
  Text("B");
  Text("C");
}

RowCenterTop

横向居中 + 纵向顶部：

typescript

import { RowCenterTop } from "@core/designsystem";

RowCenterTop() {
  Text("顶部居中");
}

RowCenterBottom

横向居中 + 纵向底部：

typescript

import { RowCenterBottom } from "@core/designsystem";

RowCenterBottom() {
  Text("底部居中");
}

RowStartTop

横向起始 + 纵向顶部：

typescript

import { RowStartTop } from "@core/designsystem";

RowStartTop() {
  Text("左上角");
}

RowStartBottom

横向起始 + 纵向底部：

typescript

import { RowStartBottom } from "@core/designsystem";

RowStartBottom() {
  Text("左下角");
}

RowEndTop

横向末尾 + 纵向顶部：

typescript

import { RowEndTop } from "@core/designsystem";

RowEndTop() {
  Text("右上角");
}

RowEndBottom

横向末尾 + 纵向底部：

typescript

import { RowEndBottom } from "@core/designsystem";

RowEndBottom() {
  Text("右下角");
}

其他 Row 组件

RowSpaceBetweenTop - 横向两端分布 + 纵向顶部
RowSpaceBetweenBottom - 横向两端分布 + 纵向底部
RowSpaceAroundTop - 横向环绕分布 + 纵向顶部
RowSpaceAroundBottom - 横向环绕分布 + 纵向底部
RowSpaceEvenlyTop - 横向均分 + 纵向顶部
RowSpaceEvenlyBottom - 横向均分 + 纵向底部

Column 组件系列

框架提供了 20+ 种 Column 布局组件，覆盖常见的布局场景。所有 Column 组件都支持与 Row 相同的通用参数。

ColumnBase

基础 Column 组件，保留官方 Column 的所有能力：

typescript

import { ColumnBase } from "@core/designsystem";

ColumnBase({
  justifyContent: FlexAlign.Start,
  alignItems: HorizontalAlign.Start,
  widthValue: "100%",
  paddingValue: 16
}) {
  Text("顶部");
  Text("底部");
}

ColumnCenter

纵向居中 + 水平居中：

typescript

import { ColumnCenter } from "@core/designsystem";

ColumnCenter({ fillMaxSize: true }) {
  Text("完全居中");
}

ColumnStart

纵向起始 + 水平起始：

typescript

import { ColumnStart } from "@core/designsystem";

ColumnStart() {
  Text("左上角对齐");
}

ColumnEnd

纵向末尾 + 水平末尾：

typescript

import { ColumnEnd } from "@core/designsystem";

ColumnEnd() {
  Text("右下角对齐");
}

ColumnSpaceBetween

纵向两端分布 + 水平居中：

typescript

import { ColumnSpaceBetween } from "@core/designsystem";

ColumnSpaceBetween() {
  Text("顶部");
  Text("底部");
}

ColumnSpaceAround

纵向环绕分布 + 水平居中：

typescript

import { ColumnSpaceAround } from "@core/designsystem";

ColumnSpaceAround() {
  Text("项目1");
  Text("项目2");
  Text("项目3");
}

ColumnSpaceEvenly

纵向均分 + 水平居中：

typescript

import { ColumnSpaceEvenly } from "@core/designsystem";

ColumnSpaceEvenly() {
  Text("A");
  Text("B");
  Text("C");
}

ColumnCenterStart

纵向居中 + 水平起始：

typescript

import { ColumnCenterStart } from "@core/designsystem";

ColumnCenterStart() {
  Text("左侧居中");
}

ColumnCenterEnd

纵向居中 + 水平末尾：

typescript

import { ColumnCenterEnd } from "@core/designsystem";

ColumnCenterEnd() {
  Text("右侧居中");
}

ColumnStartCenter

纵向起始 + 水平居中：

typescript

import { ColumnStartCenter } from "@core/designsystem";

ColumnStartCenter() {
  Text("顶部居中");
}

ColumnEndCenter

纵向末尾 + 水平居中：

typescript

import { ColumnEndCenter } from "@core/designsystem";

ColumnEndCenter() {
  Text("底部居中");
}

其他 Column 组件

ColumnSpaceBetweenStart - 纵向两端分布 + 水平起始
ColumnSpaceBetweenEnd - 纵向两端分布 + 水平末尾
ColumnSpaceAroundStart - 纵向环绕分布 + 水平起始
ColumnSpaceAroundEnd - 纵向环绕分布 + 水平末尾
ColumnSpaceEvenlyStart - 纵向均分 + 水平起始
ColumnSpaceEvenlyEnd - 纵向均分 + 水平末尾

ScrollBase

基础的 Scroll 组件：

typescript

import { ScrollBase } from "@core/designsystem";

ScrollBase() {
  Column() {
    // 可滚动内容
  }
}

SpacerBase

间距组件：

typescript

import { SpacerBase } from "@core/designsystem";

Column() {
  Text("内容1");
  SpacerBase({ height: 16 });  // 16vp 间距
  Text("内容2");
}

通用属性

CommonAttribute

提供常用的组件属性封装：

typescript

import { CommonAttribute } from "@core/designsystem";

Column() {
  // ...
}
.apply(CommonAttribute.fullSize())      // 全屏尺寸
.apply(CommonAttribute.centerAlign())   // 居中对齐

RowAttribute / ColumnAttribute

Row 和 Column 的专用属性：

typescript

import { RowAttribute, ColumnAttribute } from "@core/designsystem";

Row() {
  // ...
}
.apply(RowAttribute.spaceBetween())  // 两端对齐

Column() {
  // ...
}
.apply(ColumnAttribute.topAlign())   // 顶部对齐

使用示例

响应式布局

typescript

import { P100, P50, RowBase, ColumnBase } from "@core/designsystem";

@Entry
@Component
struct ResponsivePage {
  build() {
    ColumnBase() {
      // 头部：占 20% 高度
      RowBase() {
        Text("头部");
      }
      .width(P100)
      .height("20%")

      // 内容：占 60% 高度
      RowBase() {
        // 左侧：占 30% 宽度
        ColumnBase() {
          Text("侧边栏");
        }
        .width(P30)
        .height(P100)

        // 右侧：占 70% 宽度
        ColumnBase() {
          Text("主内容");
        }
        .width(P70)
        .height(P100)
      }
      .width(P100)
      .height("60%")

      // 底部：占 20% 高度
      RowBase() {
        Text("底部");
      }
      .width(P100)
      .height("20%")
    }
    .width(P100)
    .height(P100)
  }
}

均分布局

typescript

import { RowBase } from "@core/designsystem";

RowBase() {
  Text("项目1").layoutWeight(1);
  Text("项目2").layoutWeight(1);
  Text("项目3").layoutWeight(1);
}
.width("100%")

居中布局

typescript

import { RowCenter, ColumnCenter } from "@core/designsystem";

ColumnCenter() {
  RowCenter() {
    Text("水平垂直居中");
  }
}
.width("100%")
.height("100%")

最佳实践

1. 优先使用封装组件

typescript

// 推荐
import { RowBase, ColumnBase } from "@core/designsystem";

RowBase() {
  // ...
}

// 不推荐
Row() {
  // ...
}

2. 使用百分比常量

typescript

// 推荐
import { P100, P50 } from "@core/designsystem";

Column() {
  // ...
}
.width(P100)
.height(P50)

// 不推荐
Column() {
  // ...
}
.width("100%")
.height("50%")

3. 使用 layoutWeight 实现均分

typescript

// 推荐
Row() {
  Text("左").layoutWeight(1);
  Text("右").layoutWeight(1);
}

// 不推荐
Row() {
  Text("左");
  Text("右");
}
.justifyContent(FlexAlign.SpaceAround)

注意事项

一致性：统一使用设计系统提供的组件和常量
响应式：优先使用百分比和 layoutWeight，避免硬编码尺寸
性能：合理使用组件，避免过度嵌套

下一步

通用组件 - 了解更多通用 UI 组件
代码规范 - 了解布局规范

设计系统 ​

概述 ​

模块组成 ​

布局常量 ​

百分比常量 ​

可用常量 ​

基础组件 ​

Row 组件系列 ​

通用参数 ​

RowBase ​

RowCenter ​

RowStartCenter ​

RowEndCenter ​

RowSpaceBetweenCenter ​

RowSpaceAroundCenter ​

RowSpaceEvenlyCenter ​

RowCenterTop ​

RowCenterBottom ​

RowStartTop ​

RowStartBottom ​

RowEndTop ​

RowEndBottom ​

其他 Row 组件 ​

Column 组件系列 ​

ColumnBase ​

ColumnCenter ​

ColumnStart ​

ColumnEnd ​

ColumnSpaceBetween ​

ColumnSpaceAround ​

ColumnSpaceEvenly ​

ColumnCenterStart ​

ColumnCenterEnd ​

ColumnStartCenter ​

ColumnEndCenter ​

其他 Column 组件 ​

ScrollBase ​

SpacerBase ​

通用属性 ​

CommonAttribute ​

RowAttribute / ColumnAttribute ​

使用示例 ​

响应式布局 ​

均分布局 ​

居中布局 ​

最佳实践 ​

1. 优先使用封装组件 ​

2. 使用百分比常量 ​

3. 使用 layoutWeight 实现均分 ​

注意事项 ​

下一步 ​

设计系统

概述

模块组成

布局常量

百分比常量

可用常量

基础组件

Row 组件系列

通用参数

RowBase

RowCenter

RowStartCenter

RowEndCenter

RowSpaceBetweenCenter

RowSpaceAroundCenter

RowSpaceEvenlyCenter

RowCenterTop

RowCenterBottom

RowStartTop

RowStartBottom

RowEndTop

RowEndBottom

其他 Row 组件

Column 组件系列

ColumnBase

ColumnCenter

ColumnStart

ColumnEnd

ColumnSpaceBetween

ColumnSpaceAround

ColumnSpaceEvenly

ColumnCenterStart

ColumnCenterEnd

ColumnStartCenter

ColumnEndCenter

其他 Column 组件

ScrollBase

SpacerBase

通用属性

CommonAttribute

RowAttribute / ColumnAttribute

使用示例

响应式布局

均分布局

居中布局

最佳实践

1. 优先使用封装组件

2. 使用百分比常量

3. 使用 layoutWeight 实现均分

注意事项

下一步