8.7 版本发布—WinterCG 兼容性第一部分
了解更多

<WrapLayout> 是一个布局容器，允许您根据 orientation 属性在行或列中定位项目。当空间填满时，容器会自动将项目换行到新的一行或一列。

示例 ​

水平 WrapLayout ​

默认情况下，WrapLayout 会沿行方向换行其子项目。以下示例创建了一行大小相同的项目。当行空间不足时，容器会将最后一个项目换行到新的一行。

xml
<WrapLayout backgroundColor="#3c495e">
  <Label text="first" width="30%" height="30%" backgroundColor="#43B3F4" />
  <Label text="second" width="30%" height="30%" backgroundColor="#075B88" />
  <Label text="third" width="30%" height="30%" backgroundColor="#1089CA" />
  <Label text="fourth" width="30%" height="30%" backgroundColor="#1089CA" />
</WrapLayout>

垂直 WrapLayout ​

要垂直换行子项目，请将 WrapLayout 的 orientation 属性设置为 vertical。以下示例创建了一列大小相同的项目。当列空间不足时，容器会将最后一个项目换行到新的一列。

xml
<WrapLayout orientation="vertical" backgroundColor="#3c495e">
  <Label text="first" width="30%" height="30%" backgroundColor="#43B3F4" />
  <Label text="second" width="30%" height="30%" backgroundColor="#075B88" />
  <Label text="third" width="30%" height="30%" backgroundColor="#1089CA" />
  <Label text="fourth" width="30%" height="30%" backgroundColor="#1089CA" />
</WrapLayout>

属性 ​

orientation ​

ts
orientation: 'horizontal' | 'vertical'

指定堆叠方向。

默认为 horizontal。

itemWidth ​

ts
itemWidth: number

设置用于测量和布局每个子项的宽度。如果未设置，则会根据内容自动计算项目宽度。

默认为 Number.NaN。

itemHeight ​

ts
itemHeight: number

设置用于测量和布局每个子项的高度。如果未设置，则会根据内容自动计算项目高度。

...继承的 ​

有关未显示的其他继承属性，请参阅 API 参考。

下一页
DockLayout