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

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

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

停靠在每一侧和中心

以下示例在 <DockLayout> 中创建了5个元素。前四个将中心元素包裹在一个框架中。

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

道具

名称类型描述
stretchLastChildBoolean启用或禁用拉伸最后一个子项以适合剩余空间。

额外的儿童道具

当元素是直接子元素时 <DockLayout>,您可以使用以下附加属性。

名称类型描述
dockString指定将元素停靠到哪一侧。
有效值: top, right, bottom, 或 left
Contributors