NativeScript-Vue 2.0: Back to the Vueture (Webinar) is now on YouTube
WrapLayout

This is an overview of the most common usage of WrapLayout. For more information about the available properties, methods, or events, head over to the complete API documentation for WrapLayout.

<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>

道具

名称类型描述
orientationString指定堆叠方向。
有效值: horizontal (按行排列项目)和 vertical (按列排列项目)。
默认值: horizontal
itemWidthNumber设置用于测量和布局每个子项的宽度。
默认值: Number.NaN,不限制儿童。
itemHeightNumber设置用于测量和布局每个子项的高度。
默认值为 Number.NaN,不限制子项。

额外的儿童道具

没有。

Contributors