WrapLayout - NativeScript-Vue 中文

<WrapLayout> 是一种布局容器，它允许您根据 orientation 属性将项目排列在行或列中。当空间填满时，容器会自动将项目包装到新行或列中。

示例

默认包装布局

以下示例创建了一行大小相同的项目。当行空间不足时，容器会将最后一个项目包装到新行。

<WrapLayout backgroundColor="#3c495e">
  <Label text="first" width="30%" height="30%" backgroundColor="#43b883"/>
  <Label text="second" width="30%" height="30%" backgroundColor="#1c6b48"/>
  <Label text="third" width="30%" height="30%" backgroundColor="#289062"/>
  <Label text="fourth" width="30%" height="30%" backgroundColor="#289062"/>
</WrapLayout>

垂直包装布局

以下示例创建了一列大小相同的项目。当行空间不足时，容器会将最后一个项目包装到新列。

<WrapLayout orientation="vertical" backgroundColor="#3c495e">
  <Label text="first" width="30%" height="30%" backgroundColor="#43b883"/>
  <Label text="second" width="30%" height="30%" backgroundColor="#1c6b48"/>
  <Label text="third" width="30%" height="30%" backgroundColor="#289062"/>
  <Label text="fourth" width="30%" height="30%" backgroundColor="#289062"/>
</WrapLayout>

Props

名称	类型	描述
`orientation`	`字符串`	指定堆叠方向。有效值：`horizontal`（将项目排列成行）和 `vertical`（将项目排列成列）。默认值：`horizontal`。
`itemWidth`	`数字`	设置用于测量和布局每个子项的宽度。默认值为 `Number.NaN`，不会限制子项。
`itemHeight`	`数字`	设置用于测量和布局每个子项的高度。默认值为 `Number.NaN`，不会限制子项。

其他子项 Props

无。