<DockLayout> 是一种布局容器，允许您将子元素停靠在布局的侧面或中心。

<DockLayout> 具有以下行为

• 使用 dock 属性将子元素停靠到布局的 left、right、top、bottom 或中心。
  要将子元素停靠到中心，它必须是容器的**最后一个子元素**，并且必须将父元素的 stretchLastChild 属性设置为 true。
• 对子元素强制执行布局约束。
• 当其大小发生变化时，在运行时调整子元素的大小。

示例

停靠到每一侧，不拉伸最后一个子元素

以下示例创建一个类似框架的布局，包含 4 个元素，位于屏幕的 4 个边缘。

<DockLayout stretchLastChild="false" backgroundColor="#3c495e">
  <Label text="left" dock="left" width="40" backgroundColor="#43b883"/>
  <Label text="top" dock="top" height="40" backgroundColor="#289062"/>
  <Label text="right" dock="right" width="40" backgroundColor="#43b883"/>
  <Label text="bottom" dock="bottom" height="40" backgroundColor="#289062"/>
</DockLayout>

停靠到每一侧并拉伸最后一个子元素

以下示例展示了 stretchLastChild 如何影响 DockLayout 容器中子元素的位置。最后一个子元素 (bottom) 被拉伸以占据在定位前三个元素后剩余的所有空间。

<DockLayout stretchLastChild="true" backgroundColor="#3c495e">
  <Label text="left" dock="left" width="40" backgroundColor="#43b883"/>
  <Label text="top" dock="top" height="40" backgroundColor="#289062"/>
  <Label text="right" dock="right" width="40" backgroundColor="#43b883"/>
  <Label text="bottom" dock="bottom" backgroundColor="#1c6b48"/>
</DockLayout>

停靠到每一侧以及中心

以下示例创建一个包含 5 个元素的 <DockLayout>。前四个元素用框架包裹中心元素。

<DockLayout stretchLastChild="true" backgroundColor="#3c495e">
  <Label text="left" dock="left" width="40" backgroundColor="#43b883"/>
  <Label text="top" dock="top" height="40" backgroundColor="#289062"/>
  <Label text="right" dock="right" width="40" backgroundColor="#43b883"/>
  <Label text="bottom" dock="bottom" height="40" backgroundColor="#289062"/>
  <Label text="center" backgroundColor="#1c6b48" />
</DockLayout>

将多个子元素停靠到同一侧

以下示例创建包含 4 个元素的单行，这些元素跨越屏幕的整个高度和宽度。

<DockLayout stretchLastChild="true" backgroundColor="#3c495e">
  <Label text="left 1" dock="left" width="40" backgroundColor="#43b883"/>
  <Label text="left 2" dock="left" width="40" backgroundColor="#289062"/>
  <Label text="left 3" dock="left" width="40" backgroundColor="#1c6b48"/>
  <Label text="last child" backgroundColor="#43b883"/>
</DockLayout>

属性

其他子元素属性

当元素是 <DockLayout> 的直接子元素时，您可以使用以下其他属性。