智能客服
你问我答，随时在线为你解决问题
-
本模块首批接口从API version 24开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
-
本模块接口仅可在Stage模型下使用。
- 探索了解鸿蒙应用和多设备开发，学习如何构建应用/元服务应用形态HarmonyOS 应用One as All，All as One
元服务秒开直达 服务随行 无处不在
游戏为游戏创意玩法带来无限可能
多设备应用开发穿戴
折叠屏手机鸿蒙电脑开发者学堂视频课程Codelabs - 设计了解鸿蒙应用和多设备开发，学习如何构建应用/元服务
- 开发获取官方开发工具和文档等资源，将创意转化为鸿蒙应用开发工具DevEco Studio应用开发 IDE, AI Agent 和 CLI
小艺开放平台Skill 和智能体开发平台
ArkTS
ArKUI
AppGallery ConnectDevEco Testing开发资源工具下载示例代码开发文档最佳实践 - 分发通过华为应用市场发布你的应用，多渠道触达用户应用分发应用市场纯净安全的全场景应用分发平台
游戏中心
应用审核政策服务分发小艺HarmonyOS 的超级 AI 入口
智慧助手·今天
服务分发文档内容分发主题服务
内容分发文档 - 推广与变现一站式流量增长与营销变现平台推广应用推广引擎全链路应用推广与增长服务平台
鲸鸿动能广告为企业广告主提供广告营销服务
联运服务推广文档变现鲸鸿动能流量变现使能应用展示广告，实现流量变现应用内支付变现文档 - 生态合作携手伙伴共建共享鸿蒙智能终端生态伙伴 SDK一站式获取安全可靠的鸿蒙伙伴 SDK
生态服务鸿蒙应用开发、培训和人力服务
服务商伙伴中心华为终端云服务商伙伴的统一门户
伙伴入驻指南生态市场介绍，卖家和买家服务指引
廉洁政策合作伙伴诚信廉洁政策
- 支持获取客服帮助、技术支持、活动资讯等信息智能客服24小时 AI 在线自助服务，即问即答
社区问答在官方论坛提问，与开发者互动交流
在线提单提交工单，获得技术支持
开发者活动HDD 等线下活动速览及报名入口
资讯帮助指南
全部文档
指南
API
开放能力API
高级筛选
API version全部版本
设备全部
元服务API集不筛选
API参考概述
应用框架
系统
媒体
图形
应用服务
AI
公共基础能力
标准库
LayoutAlgorithm
Phone24+PC/2in124+Tablet24+TV24+Wearable24+
更新时间: 2026-08-29 09:41
本文导读
DynamicLayout组件支持的布局算法详细信息。
LayoutAlgorithm是动态布局容器的布局算法基础类型，提供了多种布局算法实现，包括线性布局、堆叠布局和网格布局。开发者可以根据实际场景选择合适的布局算法，也可以继承CustomLayoutAlgorithm实现自定义布局。
说明
导入模块
import { LayoutAlgorithm, CustomLayoutAlgorithm, RowLayoutAlgorithm, ColumnLayoutAlgorithm, StackLayoutAlgorithm, GridLayoutAlgorithm } from '@kit.ArkUI'; LayoutAlgorithm
Phone24+PC/2in124+Tablet24+TV24+Wearable24+
动态布局容器DynamicLayout的布局算法基础类型。
说明
该类型变量可以赋值具体的布局算法类对象，如CustomLayoutAlgorithm类对象、RowLayoutAlgorithm类对象等。
模型约束： 此接口仅可在Stage模型下使用。
卡片能力： 从API version 24开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 24开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
CustomLayoutAlgorithm
Phone24+PC/2in124+Tablet24+TV24+Wearable24+
自定义布局算法类，允许开发者实现自定义的测量和布局逻辑。适用于需要精细控制子组件尺寸和位置的复杂布局场景，如瀑布流布局、不规则网格布局、动态流式布局等。通过重写onMeasure和onLayout方法，开发者可以实现内置布局算法无法覆盖的布局策略。
装饰器类型： @ObservedV2
说明
CustomLayoutAlgorithm类对象可以作为DynamicLayout组件的入参指定布局算法。
onMeasure
Phone24+PC/2in124+Tablet24+TV24+Wearable24+
onMeasure(self: FrameNode, constraint: LayoutConstraint): void
通过重写此函数，开发者可以自定义测量子组件的大小。ArkUI框架会在动态布局组件确定尺寸时，将该组件对应的FrameNode和布局约束通过onMeasure传递给开发者。不允许在onMeasure函数中改变状态变量。
说明
- onMeasure和onLayout通常需要配合使用，共同完成完整的自定义布局流程。框架先调用onMeasure测量子组件大小，再调用onLayout设置子组件位置。
- 在此函数中，开发者可以调用FrameNode的getChild()方法获取子组件FrameNode，调用FrameNode的measure()方法测量子组件大小，参考DynamicLayout组件示例1（自定义布局算法实现瀑布流布局）。
模型约束： 此接口仅可在Stage模型下使用。
卡片能力： 从API version 24开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 24开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
展开
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| self | FrameNode | 是 | 动态布局组件在组件树上的实体节点，用于获取子组件FrameNode并测量子组件大小。 |
| constraint | LayoutConstraint | 是 | 动态布局组件进行测量时使用的布局约束。 |
onLayout
Phone24+PC/2in124+Tablet24+TV24+Wearable24+
onLayout(self: FrameNode, position: Position): void
通过重写此函数，开发者可以自定义排列子组件的位置。ArkUI框架会在动态布局组件确定位置时，将该组件对应的FrameNode和布局位置通过onLayout传递给开发者。不允许在onLayout函数中改变状态变量。
说明
- onLayout和onMeasure通常需要配合使用，共同完成完整的自定义布局流程。框架先调用onMeasure测量子组件大小，再调用onLayout设置子组件位置。
- 在此函数中，开发者可以调用FrameNode的getChild()方法获取子组件FrameNode，调用FrameNode的layout()方法设置子组件位置，参考DynamicLayout组件示例1（自定义布局算法实现瀑布流布局）。
模型约束： 此接口仅可在Stage模型下使用。
卡片能力： 从API version 24开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 24开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
示例：
请参考DynamicLayout组件示例1（自定义布局算法实现瀑布流布局）。
RowLayoutAlgorithm
Phone24+PC/2in124+Tablet24+TV24+Wearable24+
水平方向线性布局算法类，用于实现子组件的水平线性排列。适用于需要水平排列子组件的场景，如横向列表、工具栏、标签栏、操作按钮组等。支持设置子组件间距、垂直对齐方式、水平对齐方式和排列方向，提供类似Row组件的布局能力。
装饰器类型： @ObservedV2
说明
RowLayoutAlgorithm类对象可以作为DynamicLayout组件的入参指定布局算法。
属性
模型约束： 此接口仅可在Stage模型下使用。
卡片能力： 从API version 24开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 24开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
展开
| 名称 | 类型 | 只读 | 可选 | 说明 |
|---|---|---|---|---|
| space | LengthMetrics | 否 | 是 | 子组件水平方向间距。取值范围：非负数。 默认值：LengthMetrics.vp(0) 非法值：按默认值处理。 装饰器类型：@Trace |
| alignItems | VerticalAlign | 否 | 是 | 所有子组件在垂直方向上的对齐格式。 默认值：VerticalAlign.Center 非法值：按默认值处理。 装饰器类型：@Trace |
| justifyContent | FlexAlign | 否 | 是 | 所有子组件在水平方向上的对齐格式。 默认值：FlexAlign.Start 非法值：按默认值处理。 装饰器类型：@Trace |
| isReverse | boolean | 否 | 是 | 子组件在水平方向上的排列是否反转。取值为true表示子组件在水平方向上反转排列。水平方向受通用属性direction影响，当direction属性设置后，子组件会先根据direction排列，再根据isReverse进行反转。取值为false表示子组件在水平方向上正序排列。 默认值：false 非法值：按默认值处理。 装饰器类型：@Trace |
constructor
Phone24+PC/2in124+Tablet24+TV24+Wearable24+
constructor(option?: RowLayoutAlgorithmOptions)
水平方向线性布局算法类的构造函数。
模型约束： 此接口仅可在Stage模型下使用。
卡片能力： 从API version 24开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 24开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
展开
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| option | RowLayoutAlgorithmOptions | 否 | 水平方向线性布局算法的构造入参，设置布局算法的间距、主轴对齐方式、交叉轴对齐方式及主轴排列方向。不传入时使用各属性的默认值。 |
示例：
请参考DynamicLayout组件示例2（切换布局算法）。
RowLayoutAlgorithmOptions
Phone24+PC/2in124+Tablet24+TV24+Wearable24+
设置水平方向线性布局算法的间距、主轴对齐方式、交叉轴对齐方式及主轴排列方向。
模型约束： 此接口仅可在Stage模型下使用。
卡片能力： 从API version 24开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 24开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
展开
| 名称 | 类型 | 只读 | 可选 | 说明 |
|---|---|---|---|---|
| space | LengthMetrics | 否 | 是 | 子组件水平方向间距。取值范围：非负数。 默认值：LengthMetrics.vp(0) 非法值：按默认值处理。 |
| alignItems | VerticalAlign | 否 | 是 | 所有子组件在垂直方向上的对齐格式。 默认值：VerticalAlign.Center 非法值：按默认值处理。 |
| justifyContent | FlexAlign | 否 | 是 | 所有子组件在水平方向上的对齐格式。 默认值：FlexAlign.Start 非法值：按默认值处理。 |
| isReverse | boolean | 否 | 是 | 子组件在水平方向上的排列是否反转。取值为true表示子组件在水平方向上反转排列。水平方向受通用属性direction影响，当direction属性设置后，子组件会先根据direction排列，再根据isReverse进行反转。取值为false表示子组件在水平方向上正序排列。 默认值：false 非法值：按默认值处理。 |
ColumnLayoutAlgorithm
Phone24+PC/2in124+Tablet24+TV24+Wearable24+
垂直方向线性布局算法类，用于实现子组件的垂直线性排列。适用于需要垂直排列子组件的场景，如纵向列表、垂直堆叠的表单项、垂直菜单等。支持设置子组件间距、水平对齐方式、垂直对齐方式和排列方向，提供类似Column组件的布局能力。
装饰器类型： @ObservedV2
说明
ColumnLayoutAlgorithm类对象可以作为DynamicLayout组件的入参指定布局算法。
属性
模型约束： 此接口仅可在Stage模型下使用。
卡片能力： 从API version 24开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 24开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
展开
| 名称 | 类型 | 只读 | 可选 | 说明 |
|---|---|---|---|---|
| space | LengthMetrics | 否 | 是 | 子组件垂直方向间距。取值范围：非负数。 默认值：LengthMetrics.vp(0) 非法值：按默认值处理。 装饰器类型：@Trace |
| alignItems | HorizontalAlign | 否 | 是 | 所有子组件在水平方向上的对齐格式。 默认值：HorizontalAlign.Center 非法值：按默认值处理。 装饰器类型：@Trace |
| justifyContent | FlexAlign | 否 | 是 | 所有子组件在垂直方向上的对齐格式。 默认值：FlexAlign.Start 非法值：按默认值处理。 装饰器类型：@Trace |
| isReverse | boolean | 否 | 是 | 子组件在垂直方向上的排列是否反转。取值为true表示子组件在垂直方向上反转排列。垂直方向不受通用属性direction影响。取值为false表示子组件在垂直方向上正序排列。 默认值：false 非法值：按默认值处理。 装饰器类型：@Trace |
constructor
Phone24+PC/2in124+Tablet24+TV24+Wearable24+
constructor(option?: ColumnLayoutAlgorithmOptions)
垂直方向线性布局算法类的构造函数。
模型约束： 此接口仅可在Stage模型下使用。
卡片能力： 从API version 24开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 24开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
展开
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| option | ColumnLayoutAlgorithmOptions | 否 | 垂直方向线性布局算法的构造入参，设置布局算法的间距、主轴对齐方式、交叉轴对齐方式及主轴排列方向。不传入时使用各属性的默认值。 |
示例：
请参考DynamicLayout组件示例2（切换布局算法）。
ColumnLayoutAlgorithmOptions
Phone24+PC/2in124+Tablet24+TV24+Wearable24+
设置垂直方向线性布局算法的间距、主轴对齐方式、交叉轴对齐方式及主轴排列方向。
模型约束： 此接口仅可在Stage模型下使用。
卡片能力： 从API version 24开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 24开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
展开
| 名称 | 类型 | 只读 | 可选 | 说明 |
|---|---|---|---|---|
| space | LengthMetrics | 否 | 是 | 子组件垂直方向间距。取值范围：非负数。 默认值：LengthMetrics.vp(0) 非法值：按默认值处理。 |
| alignItems | HorizontalAlign | 否 | 是 | 所有子组件在水平方向上的对齐格式。 默认值：HorizontalAlign.Center 非法值：按默认值处理。 |
| justifyContent | FlexAlign | 否 | 是 | 所有子组件在垂直方向上的对齐格式。 默认值：FlexAlign.Start 非法值：按默认值处理。 |
| isReverse | boolean | 否 | 是 | 子组件在垂直方向上的排列是否反转。取值为true表示子组件在垂直方向上反转排列。垂直方向不受通用属性direction影响。取值为false表示子组件在垂直方向上正序排列。 默认值：false 非法值：按默认值处理。 |
StackLayoutAlgorithm
Phone24+PC/2in124+Tablet24+TV24+Wearable24+
堆叠布局算法类，用于实现子组件的堆叠排列。适用于需要子组件重叠显示的场景，如图层叠加、悬浮按钮、带背景的内容区域、卡片叠加效果等。支持设置子组件在堆叠容器中的对齐方式，提供类似Stack组件的布局能力。
装饰器类型： @ObservedV2
说明
StackLayoutAlgorithm类对象可以作为DynamicLayout组件的入参指定布局算法。
属性
模型约束： 此接口仅可在Stage模型下使用。
卡片能力： 从API version 24开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 24开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
展开
| 名称 | 类型 | 只读 | 可选 | 说明 |
|---|---|---|---|---|
| alignContent | LocalizedAlignment | 否 | 是 | 设置子组件在堆叠布局算法中对齐格式。 默认值：LocalizedAlignment.CENTER 非法值：按默认值处理。 装饰器类型：@Trace |
constructor
Phone24+PC/2in124+Tablet24+TV24+Wearable24+
constructor(option?: StackLayoutAlgorithmOptions)
堆叠布局算法类的构造函数。
模型约束： 此接口仅可在Stage模型下使用。
卡片能力： 从API version 24开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 24开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
展开
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| option | StackLayoutAlgorithmOptions | 否 | 堆叠布局算法的构造入参，设置九宫格对齐格式。不传入时使用各属性的默认值。 |
示例：
请参考DynamicLayout组件示例2（切换布局算法）。
StackLayoutAlgorithmOptions
Phone24+PC/2in124+Tablet24+TV24+Wearable24+
设置堆叠布局算法的对齐方式。
模型约束： 此接口仅可在Stage模型下使用。
卡片能力： 从API version 24开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 24开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
展开
| 名称 | 类型 | 只读 | 可选 | 说明 |
|---|---|---|---|---|
| alignContent | LocalizedAlignment | 否 | 是 | 设置子组件在堆叠布局算法中对齐格式。 默认值：LocalizedAlignment.CENTER 非法值：按默认值处理。 |
GridLayoutAlgorithm
Phone24+PC/2in124+Tablet24+TV24+Wearable24+
网格布局算法类，用于实现子组件的网格排列。适用于需要将子组件按网格形式排列的场景，如宫格菜单、相册网格、应用列表、商品展示等。支持设置列数模板、列间距和行间距，提供类似Grid组件的布局能力。
装饰器类型： @ObservedV2
说明
GridLayoutAlgorithm类对象可以作为DynamicLayout组件的入参指定布局算法。
属性
模型约束： 此接口仅可在Stage模型下使用。
元服务API： 从API version 24开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
展开
| 名称 | 类型 | 只读 | 可选 | 说明 |
|---|---|---|---|---|
| columnsTemplate | string | ItemFillPolicy | 否 | 是 | 设置当前网格布局的列模板，定义列的宽度和数量。string类型需符合模板格式，例如'1fr'表示单列布局，'1fr 1fr 1fr'表示三列等宽布局，'1fr 2fr'表示两列且第二列宽度是第一列的两倍。使用ItemFillPolicy时可实现自适应列数。 默认值：'1fr' 非法值：按默认值处理。 装饰器类型：@Trace |
| columnsGap | LengthMetrics | 否 | 是 | 列与列之间的间距。取值范围：非负数。 默认值：LengthMetrics.vp(0) 非法值：按默认值处理。 装饰器类型：@Trace |
| rowsGap | LengthMetrics | 否 | 是 | 行与行之间的间距。取值范围：非负数。 默认值：LengthMetrics.vp(0) 非法值：按默认值处理。 装饰器类型：@Trace |
constructor
Phone24+PC/2in124+Tablet24+TV24+Wearable24+
constructor(option?: GridLayoutAlgorithmOptions)
网格布局算法类的构造函数。
模型约束： 此接口仅可在Stage模型下使用。
元服务API： 从API version 24开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
展开
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| option | GridLayoutAlgorithmOptions | 否 | 网格布局算法的构造入参，设置网格布局的列数、列间距、行间距。不传入时使用各属性的默认值。 |
示例：
请参考DynamicLayout组件示例2（切换布局算法）。
GridLayoutAlgorithmOptions
Phone24+PC/2in124+Tablet24+TV24+Wearable24+
设置网格布局算法的列数模板、列间距、行间距。
模型约束： 此接口仅可在Stage模型下使用。
元服务API： 从API version 24开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
展开
| 名称 | 类型 | 只读 | 可选 | 说明 |
|---|---|---|---|---|
| columnsTemplate | string | ItemFillPolicy | 否 | 是 | 设置当前网格布局的列模板，定义列的宽度和数量。string类型需符合模板格式，例如'1fr'表示单列布局，'1fr 1fr 1fr'表示三列等宽布局，'1fr 2fr'表示两列且第二列宽度是第一列的两倍。使用ItemFillPolicy时可实现自适应列数。 默认值：'1fr' 非法值：按默认值处理。 |
| columnsGap | LengthMetrics | 否 | 是 | 列与列之间的间距。取值范围：非负数。 默认值：LengthMetrics.vp(0) 非法值：按默认值处理。 |
| rowsGap | LengthMetrics | 否 | 是 | 行与行之间的间距。取值范围：非负数。 默认值：LengthMetrics.vp(0) 非法值：按默认值处理。 |
华为开发者联盟 版权所有 ©2026
在 开发与测试 开放能力API 中进行搜索
请输入您想要搜索的关键词