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

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

<AbsoluteLayout> 具有以下行为

  • 使用一对绝对顶部/左侧坐标来定位其子元素。
  • 不强制对子元素进行任何布局约束。
  • 在大小更改时不会在运行时调整子元素的大小。

创建简单的网格状布局 ​

以下示例创建了一个简单的网格。

xml
<AbsoluteLayout backgroundColor="#eef7ff">
  <Label
    text="10, 10"
    left="10"
    top="10"
    width="100"
    height="100"
    backgroundColor="#43b2f4"
  />
  <Label
    text="120, 10"
    left="120"
    top="10"
    width="100"
    height="100"
    backgroundColor="#43b2f4"
  />
  <Label
    text="10, 120"
    left="10"
    top="120"
    width="100"
    height="100"
    backgroundColor="#43b2f4"
  />
  <Label
    text="120, 120"
    left="120"
    top="120"
    width="100"
    height="100"
    backgroundColor="#43b2f4"
  />
</AbsoluteLayout>

注意

此示例展示了如何构建网格状布局，这主要用作说明 <AbsoluteLayout> 工作原理的示例。在大多数情况下，使用 网格布局 将更好地构建此 UI。

重叠元素 ​

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

xml
<AbsoluteLayout backgroundColor="#eef7ff">
  <Label
    text="10, 10"
    left="10"
    top="10"
    width="100"
    height="100"
    backgroundColor="#0089ca"
  />
  <Label
    text="30, 40"
    left="30"
    top="40"
    width="100"
    height="100"
    backgroundColor="#43b2f4"
  />
</AbsoluteLayout>

注意

如果您需要构建具有重叠元素的更复杂的 UI，请考虑使用 网格布局 以获得更大的灵活性。

绝对布局参考 ​

属性 ​

名称类型描述
N/AN/A无。
...继承继承未显示的其他继承属性。请参考 API 参考

子元素属性 ​

当元素是 <AbsoluteLayout> 的直接子元素时，您可以设置以下附加属性。

名称类型描述
顶部数字获取或设置子元素顶部边缘与其父元素顶部边缘之间的距离（以像素为单位）。
左侧数字获取或设置子元素左侧边缘与其父元素左侧边缘之间的距离（以像素为单位）。
下一个
导航组件