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

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

<StackLayout> 是一个布局容器,允许您垂直(默认)或水平堆叠子元素。

例子

默认堆叠

以下示例创建一个由3个大小相等的元素组成的垂直堆栈。拉伸项目以覆盖整个屏幕宽度。项目按其声明的顺序放置。

<StackLayout backgroundColor="#3c495e">
  <Label text="first" height="70" backgroundColor="#43b883"/>
  <Label text="second" height="70" backgroundColor="#289062"/>
  <Label text="third" height="70" backgroundColor="#1c6b48"/>
</StackLayout>

水平堆叠

以下示例创建一个由3个大小相等的元素组成的水平堆栈。拉伸项目以覆盖整个屏幕高度。项目按其声明的顺序放置。

<StackLayout orientation="horizontal" backgroundColor="#3c495e">
  <Label text="first" width="70" backgroundColor="#43b883"/>
  <Label text="second" width="70" backgroundColor="#289062"/>
  <Label text="third" width="70" backgroundColor="#1c6b48"/>
</StackLayout>

堆叠布局与水平对齐的孩子

以下示例创建具有响应大小的对角堆栈项。物品垂直堆放。

<StackLayout backgroundColor="#3c495e">
  <Label text="left" horizontalAlignment="left"
         width="33%" height="70" backgroundColor="#43b883"/>
  <Label text="center" horizontalAlignment="center"
         width="33%" height="70" backgroundColor="#289062"/>
  <Label text="right" horizontalAlignment="right"
         width="33%" height="70" backgroundColor="#1c6b48"/>
  <Label text="stretch" horizontalAlignment="stretch"
         height="70" backgroundColor="#43b883"/>
</StackLayout>

水平堆栈布局与垂直对齐的孩子

以下示例创建具有响应大小的对角堆栈项。物品是水平堆放的。

<StackLayout orientation="horizontal" backgroundColor="#3c495e">
  <Label text="top" verticalAlignment="top"
         width="70" height="33%" backgroundColor="#43b883"/>
  <Label text="center" verticalAlignment="center"
         width="70" height="33%" backgroundColor="#289062"/>
  <Label text="bottom" verticalAlignment="bottom"
         width="70" height="33%" backgroundColor="#1c6b48"/>
  <Label text="stretch" verticalAlignment="stretch"
         width="70" backgroundColor="#43b883"/>
</StackLayout>

道具

名称类型描述
orientationString指定堆叠方向。
有效值: verticalhorizontal
默认值: vertical

额外的儿童道具

没有。

Contributors