HarmonyOS的ArkUI框架基于声明式UI范式，提供了一套响应式组件体系。该体系通过断点机制与组件的属性绑定对应关系，使开发者能够为不同窗口尺寸区间预定义差异化的布局参数（如columns/span）和样式表现（如字体大小/边距）。当检测到窗口尺寸跨越断点时，触发组件实例的布局重计算和样式切换，实现从手机竖屏到横屏、折叠屏折叠状态切换以及窗口分屏等场景布局转换的实时适配，实现“一次开发，多端部署”的全景体验。

ArkUI框架常用的响应式组件及能够实现的布局场景的对应关系如下表：

响应式组件	布局场景	响应式布局方式
List	重复列表	重复布局
WaterFlow	重复瀑布流
Swiper	重复轮播视图
Grid	重复网格
SideBarContainer	侧边栏	分栏布局
Navigation	单/双栏
Navigation+SideBarContainer	三分栏
Tabs	底部/侧边导航	挪移布局
GridRow/GridCol	插图和文字组合	挪移布局
GridRow/GridCol	单列列表	缩进布局

下文将介绍响应式组件如何在一多适配体系中动态调整属性，以适应不同的显示需求。本文仅介绍响应式组件中常用的属性。

List

属性	说明
lanes	设置不同断点对应List组件布局的列数或行数，及列间距。

重复列表布局效果如下图，实现方案和示例代码请参考列表布局。

横向断点	sm	md	lg
布局效果

WaterFlow

属性	说明
WaterFlowLayoutMode	优先考虑视窗内布局信息或涉及动态切换列数时，建议使用SLIDING_WINDOW模式，详情请参考动态切换列数。
columnsTemplate	设置不同断点下瀑布流布局的列数。
columnsGap	设置不同断点下列间距。
itemConstraintSize	设置不同断点下WaterFlow所有子组件的约束尺寸。

重复瀑布流布局效果如下图，实现方案和示例代码请参考瀑布流布局。

横向断点	sm	md	lg
展示布局

Swiper

属性	说明
index	设置不同断点下默认展示的子组件索引值。
indicator	设置不同断点下是否显示导航点指示器和不同样式。
displayCount	设置不同断点下Swiper视窗内元素显示的个数。
nextMargin	设置不同断点下的后边距，用于露出后一项的一小部分。
prevMargin	设置不同断点下的前边距，用于露出前一项的一小部分。
onChange	根据不同断点，设置索引值。例如lg横向断点下展示3张图片，即当displayCount=3时，当前显示索引为index的图片组（包含index, index+1, index+2），此时返回最右侧索引应为index+2。

重复轮播布局效果如下图，实现方案和示例代码请参考轮播布局。

横向断点	sm	md	lg
展示布局

Grid

属性	说明
columnsTemplate	设置不同断点下网格布局列的数量。
rowsTemplate	设置不同断点下网格布局行的数量。
columnsGap	设置不同断点下的列间距。
rowsGap	设置不同断点下的行间距。

重复网格布局效果如下图，实现方案和示例代码请参考网格布局。

横向断点	sm	md	lg
展示布局

SideBarContainer

属性	说明
showSideBar	设置不同断点下侧边栏是否默认显示。
SideBarContainerType	设置不同断点下容器内侧边栏样式。
sideBarWidth	设置不同断点下侧边栏的宽度。
minSideBarWidth	设置不同断点下侧边栏最小宽度。
maxSideBarWidth	设置不同断点下侧边栏最大宽度。

侧边栏布局效果如下图，实现方案和示例代码请参考侧边栏。

横向断点	sm	md	lg
展示布局

Navigation

属性	说明
mode	设置不同断点下导航栏的显示模式：单栏或双栏。
navBarWidth	设置不同断点下导航栏的宽度。

单/双栏布局效果如下图，实现方案和示例代码请参考单/双栏。

横向断点	sm	md	lg
布局说明	导航栏和内容区单栏显示	导航栏和内容区分栏显示导航栏宽度50%	导航栏和内容区分栏显示导航栏宽度50%
布局效果

横向断点

布局说明

导航栏和内容区单栏显示

导航栏和内容区分栏显示

导航栏宽度50%

导航栏和内容区分栏显示

导航栏宽度50%

布局效果

点击放大

SideBarContainer+Navigation

SideBarContainer属性	说明
showSideBar	设置不同断点下侧边栏是否默认显示。
sideBarWidth	设置不同断点下侧边栏的宽度。
minSideBarWidth	设置不同断点下侧边栏最小宽度。
maxSideBarWidth	设置不同断点下侧边栏最大宽度。

Navigation属性	说明
mode	设置不同断点下导航栏的显示模式：单栏或双栏。
navBarWidth	设置不同断点下导航栏的宽度。

三分栏布局效果如下图，实现方案和示例代码请参考三分栏。

横向断点	sm	md	lg
布局效果

Tabs

属性	说明
vertical	设置不同断点下Tabs为横向或纵向。
barPosition	设置不同断点下Tabs的页签位置。
barMode	设置不同断点下TabBar的布局模式，以及Scrollable模式下TabBar的布局样式。
barWidth	设置不同断点下TabBar的宽度。
barHeight	设置不同断点下TabBar的高度。

底部/侧边导航布局效果如下图，实现方案和示例代码请参考底部/侧边导航。

横向断点	sm	md	lg
布局效果

GridRow/GridCol

栅格系统由容器组件GridRow和子组件GridCol组成，通过调整不同的属性可以实现挪移布局和缩进布局。

GridRow属性	说明
columns	设置不同断点下栅格容器划分的布局列数。
breakpoints	设置断点的划分阈值与横向断点一致。

GridCol属性	说明
span	设置不同断点下栅格子组件的占用列数。
offset	设置不同断点下栅格子组件的偏移列数。
order	设置不同断点下栅格子组件的序号。