鸿蒙应用开发 | 6大布局之位置布局(PositionLayout)！-一一网

大家好，我是你们的朋友朋哥，今天开始朋哥开始研究鸿蒙了，会写一些文章分享给大家，希望多多提意见。

上一篇原创文章解读了鸿蒙开发布局的表格布局(TableLayout)，表格布局非常简单，就是一个大小和样式一样的表格。

今天来解读一下位置布局（坐标布局），这种布局使用起来更简单，但是适用场景比较少。

6大布局已经基本要完成了，各位小伙伴需要尽快学习一下之前的几种布局，布局了解了，后面做界面效果就非常简单了。

简介：

在PositionLayout中，子组件通过指定准确的x/y坐标值在屏幕上显示。(0, 0)为左上角；当向下或向右移动时，坐标值变大；允许组件之间互相重叠。
PositionLayout以坐标的形式控制组件的显示位置，允许组件相互重叠。

给大家做个效果草图，一看就明白。

点击并拖拽以移动

代码分析：

<?xml version="1.0" encoding="utf-8"?>
<PositionLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#3387CEFA">

    <Text
        ohos:id="$+id:position_text_1"
        ohos:height="100vp"
        ohos:width="250vp"
        ohos:background_element="#000000"
        ohos:position_x="120"
        ohos:position_y="40"
        ohos:text="Title"
        ohos:text_color="#ffffff"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>

    <Text
        ohos:id="$+id:position_text_2"
        ohos:height="200vp"
        ohos:width="300vp"
        ohos:background_element="#0000CC"
        ohos:position_x="50"
        ohos:position_y="220"
        ohos:text="Content"
        ohos:text_color="#ffffff"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>

    <Text
        ohos:id="$+id:position_text_3"
        ohos:height="300vp"
        ohos:width="250vp"
        ohos:background_element="#FF0000"
        ohos:position_x="280"
        ohos:position_y="600"
        ohos:text="Content"
        ohos:text_color="#ffffff"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>
</PositionLayout>
复制代码

点击并拖拽以移动

代码解析：

坐标布局主要就是两个属性，x，y坐标，通过设置坐标来设置组件的具体位置。
ohos:position_x=”120″

ohos:position_y=”40″

多提一句：

PositionLayout 即位置部局，视图以指定准确的x/y坐标值在屏幕上显示，(0, 0)为左上角，当向下或向右移动时，坐标值变大。

允许视图之间互相重叠，通常不推荐使用PositionLayout，它使界面代码太过刚性，不利于设备适配。

这种位置布局还是少用，界面效果实现起来简单，但是比较固定，想要做到适合所有设备还是需要相对布局和线性布局。

最后总结一下属性。

支持的属性

属性名称

中文描述