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

Props

子元素的额外 Props

无。