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

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

<AbsoluteLayout> 容器是NativeScript最简单的布局容器。

<AbsoluteLayout> 有以下行为:

  • 使用一对绝对左/上坐标来定位其子项。
  • 不对其子项强制执行任何布局约束。
  • 在大小更改时,不会在运行时调整其子项的大小。

例子

网格状布局

以下示例创建一个简单的网格。有关创建网格布局的更多信息,请参阅 GridLayout.

<AbsoluteLayout backgroundColor="#3c495e">
  <Label text="10,10" left="10" top="10" width="100" height="100" backgroundColor="#43b883"/>
  <Label text="120,10" left="120" top="10" width="100" height="100" backgroundColor="#43b883"/>
  <Label text="10,120" left="10" top="120" width="100" height="100" backgroundColor="#43b883"/>
  <Label text="120,120" left="120" top="120" width="100" height="100" backgroundColor="#43b883"/>
</AbsoluteLayout>

重叠元素

以下示例创建一组重叠项。

<AbsoluteLayout backgroundColor="#3c495e">
  <Label text="10,10" left="10" top="10" width="100" height="100" backgroundColor="#289062"/>
  <Label text="30,40" left="30" top="40" width="100" height="100" backgroundColor="#43b883"/>
</AbsoluteLayout>

道具

没有。

额外的子道具

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

名称类型描述
topNumber获取或设置子项的上边缘与其父项的上边缘之间的距离(以像素为单位)。
leftNumber获取或设置子项左边缘与其父项左边缘之间的距离(以像素为单位)。
Contributors