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

<DockLayout> 是一个布局容器，允许您将子视图停靠到布局的侧面或中心。

<DockLayout> 具有以下行为

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

示例 ​

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

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

xml
<DockLayout stretchLastChild="false" backgroundColor="#3c495e">
  <Label text="left" dock="left" width="40" backgroundColor="#43B3F4" />
  <Label text="top" dock="top" height="40" backgroundColor="#1089CA" />
  <Label text="right" dock="right" width="40" backgroundColor="#43B3F4" />
  <Label text="bottom" dock="bottom" height="40" backgroundColor="#1089CA" />
</DockLayout>

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

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

xml
<DockLayout stretchLastChild="true" backgroundColor="#3c495e">
  <Label text="left" dock="left" width="40" backgroundColor="#43B3F4" />
  <Label text="top" dock="top" height="40" backgroundColor="#1089CA" />
  <Label text="right" dock="right" width="40" backgroundColor="#43B3F4" />
  <Label text="bottom" dock="bottom" backgroundColor="#075B88" />
</DockLayout>

停靠到每个侧面和中心 ​

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

xml
<DockLayout stretchLastChild="true" backgroundColor="#3c495e">
  <Label text="left" dock="left" width="40" backgroundColor="#43B3F4" />
  <Label text="top" dock="top" height="40" backgroundColor="#1089CA" />
  <Label text="right" dock="right" width="40" backgroundColor="#43B3F4" />
  <Label text="bottom" dock="bottom" height="40" backgroundColor="#1089CA" />
  <Label text="center" backgroundColor="#075B88" />
</DockLayout>

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

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

xml
<DockLayout stretchLastChild="true" backgroundColor="#3c495e">
  <Label text="left 1" dock="left" width="40" backgroundColor="#43B3F4" />
  <Label text="left 2" dock="left" width="40" backgroundColor="#1089CA" />
  <Label text="left 3" dock="left" width="40" backgroundColor="#075B88" />
  <Label text="last child" backgroundColor="#43B3F4" />
</DockLayout>

属性 ​

stretchLastChild ​

ts
stretchLastChild: boolean

启用或禁用拉伸最后一个子元素以适应剩余空间。

...继承 ​

未显示的其他继承属性。请参阅 API 参考。

子元素属性 ​

当元素是 <DockLayout> 的直接子元素时，会考虑这些属性

dock ​

ts
dock: 'top' | 'right' | 'bottom' | 'left'

指定要停靠元素的哪一侧。

上一个
WrapLayout
下一个
AbsoluteLayout