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

当您将子视图添加到 StackLayout 时，它们将按照指定的方向（水平或垂直）依次排列。默认情况下，StackLayout 的方向为垂直，但您可以通过设置 orientation 属性将其更改为 horizontal。

重要

StackLayout 是一个基本的布局容器，在复杂的布局中经常被过度使用。过度使用它，嵌套过多容器或包含大量子视图，会导致性能低下和渲染缓慢。如果您大量嵌套 <StackLayout>，请考虑切换到 <GridLayout> 或 <FlexboxLayout> 以获得更好的性能。

示例 ​

垂直 StackLayout ​

默认情况下，<StackLayout> 将其子项垂直堆叠。以下示例创建了一个包含 3 个大小相同的元素的垂直 StackLayout。这些元素会拉伸以覆盖整个屏幕宽度。这些元素会按照在代码中声明的顺序排列。

xml
<StackLayout backgroundColor="#3c495e">
  <Label text="first" height="70" backgroundColor="#43B3F4" />
  <Label text="second" height="70" backgroundColor="#1089CA" />
  <Label text="third" height="70" backgroundColor="#075B88" />
</StackLayout>

在垂直 StackLayout 中水平对齐子元素 ​

垂直 StackLayout 的子元素可以使用 horizontalAlignment 属性将其自身水平对齐到 left、center 或 right 位置。

例如，我们可以将子元素在垂直 StackLayout 中对齐成对角线。

xml
<StackLayout backgroundColor="#3c495e">
  <Label
    text="left"
    horizontalAlignment="left"
    width="33%"
    height="70"
    backgroundColor="#43B3F4"
  />
  <Label
    text="center"
    horizontalAlignment="center"
    width="33%"
    height="70"
    backgroundColor="#1089CA"
  />
  <Label
    text="right"
    horizontalAlignment="right"
    width="33%"
    height="70"
    backgroundColor="#075B88"
  />
  <Label
    text="stretch"
    horizontalAlignment="stretch"
    height="70"
    backgroundColor="#43B3F4"
  />
</StackLayout>

水平 StackLayout ​

在 StackLayout 上设置 orientation="horizontal" 将使项水平堆叠。以下示例创建了一个包含 3 个大小相同的元素的水平 StackLayout。这些元素会拉伸以覆盖整个屏幕高度。

xml
<StackLayout orientation="horizontal" backgroundColor="#3c495e">
  <Label text="first" width="70" backgroundColor="#43B3F4" />
  <Label text="second" width="70" backgroundColor="#1089CA" />
  <Label text="third" width="70" backgroundColor="#075B88" />
</StackLayout>

在水平 StackLayout 中垂直对齐子元素 ​

水平 StackLayout 的子元素可以使用 verticalAlignment 属性将其自身垂直对齐到 top、center 或 bottom 位置。以下示例创建了一个包含响应式大小的对角线堆叠的项目。

xml
<StackLayout orientation="horizontal" backgroundColor="#3c495e">
  <Label
    text="top"
    verticalAlignment="top"
    width="70"
    height="33%"
    backgroundColor="#43B3F4"
  />
  <Label
    text="center"
    verticalAlignment="center"
    width="70"
    height="33%"
    backgroundColor="#1089CA"
  />
  <Label
    text="bottom"
    verticalAlignment="bottom"
    width="70"
    height="33%"
    backgroundColor="#075B88"
  />
  <Label
    text="stretch"
    verticalAlignment="stretch"
    width="70"
    backgroundColor="#43B3F4"
  />
</StackLayout>

属性 ​

orientation ​

ts
orientation: string = 'vertical' | 'horizontal'

指定 StackLayout 中子元素的方向。

有效值：vertical 和 horizontal。

默认值：vertical。

...继承 ​

未显示的更多继承属性。请参阅 API 参考

下一个
GridLayout