共计 4739 个字符，预计需要花费 12 分钟才能阅读完成。
作者：韩茹
公司：程序咖（北京）科技有限公司
鸿蒙巴士专栏作家
在 PositionLayout 中，子组件通过指定精确的 x / y 坐标值在屏幕上显示。(0, 0) 为左上角；当向下或向右挪动时，坐标值变大；容许组件之间相互重叠。
一、反对的 XML 属性
PositionLayout 的共有 XML 属性继承自：Component
| 属性名称 | 中文形容 | 取值 | 取值阐明 | 应用案例 |
|---|---|---|---|---|
| id | 控件 identity，用以辨认不同控件对象，每个控件惟一 | integer 类型 | 仅可用于配置控件的 id。 | ohos:id=”$+id:component_id” |
| theme | 款式 | 援用 | 仅可援用 pattern 资源。 | ohos:theme=”$pattern:button_pattern” |
| width | 宽度，必填项 | float 类型，match_parent，match_content | ohos:width=”20″ ohos:width=”10vp” ohos:width=”$float:size_value” |
|
| height | 高度，必填项 | float 类型，match_parent，match_content | ohos:height=”20″ ohos:height=”20vp” ohos:height=”$float:size_value” |
|
| min_width | 最小宽度 | float 类型 | ohos:min_width=”20″ ohos:min_width=”20vp” ohos:min_width=”$float:size_value” |
|
| min_height | 最小高度 | float 类型 | ohos:min_height=”20″ ohos:min_height=”20vp” ohos:min_height=”$float:size_value” |
|
| alpha | 透明度 | float 类型 | 取值范畴在 0~1。 | ohos:alpha=”0.86″ ohos:alpha=”$float:value” |
| enabled | 是否启用 | boolean 类型 | ohos:enabled=”true” ohos:enabled=”$boolean:true” |
|
| visibility | 可见性 | visible，invisible，hide | ohos:visibility=”visible” | |
| padding | 内间距 | float 类型 | ||
| margin | 外边距 | float 类型 |
二、布局形式
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:height="50vp"
ohos:width="200vp"
ohos:background_element="#9987CEFA"
ohos:layout_alignment="horizontal_center"
ohos:text="Title"
ohos:text_size="20fp"
ohos:text_alignment="center"
ohos:position_x="80vp"
ohos:position_y="20vp"
/>
<Text
ohos:height="200vp"
ohos:width="200vp"
ohos:background_element="#9987CEFA"
ohos:position_x="20vp"
ohos:position_y="100vp"
ohos:text="Content"
ohos:text_alignment="center"
ohos:text_size="20fp"/>
<Text
ohos:height="200vp"
ohos:width="200vp"
ohos:background_element="#9987CEFA"
ohos:position_x="150vp"
ohos:position_y="250vp"
ohos:text="Content"
ohos:text_alignment="center"
ohos:text_size="20fp"/>
</PositionLayout>成果：
https://img.chengxuka.comsrc=…
对于超过布局自身大小的组件，超出局部将不显示。
<?xml version="1.0" encoding="utf-8"?>
<PositionLayout
...
>
...
<Text
ohos:height="200vp"
ohos:width="200vp"
ohos:background_element="#9987CEFA"
ohos:position_x="250vp"
ohos:position_y="150vp"
ohos:text="Right"
ohos:text_alignment="center"
ohos:text_size="20fp"/>
</PositionLayout>效果图：
<img src=”https://img.chengxuka.com/WX20210607-135528@2x.png/mark” alt=”WX20210607-135528@2x” style=”zoom:50%;” />
设置子组件的坐标时（position_x 和 position_y 属性），除了上述示例中的 XML 形式，还能够在对应的 AbilitySlice 中通过 setPosition(int x, int y) 接口设置。
从新创立一个布局文件：position_layout.xml
<?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="#99FDF5E6"
>
<Text
ohos:id="$+id:text1"
ohos:height="50vp"
ohos:width="200vp"
ohos:background_element="#99FFE4B5"
ohos:layout_alignment="horizontal_center"
ohos:text="Title"
ohos:text_size="20fp"
ohos:text_alignment="center"
/>
<Text
ohos:id="$+id:text2"
ohos:height="200vp"
ohos:width="200vp"
ohos:background_element="#99FFE4B5"
ohos:text="Content"
ohos:text_alignment="center"
ohos:text_size="20fp"/>
<Text
ohos:id="$+id:text3"
ohos:height="200vp"
ohos:width="200vp"
ohos:background_element="#99FFE4B5"
ohos:text="Content"
ohos:text_alignment="center"
ohos:text_size="20fp"/>
</PositionLayout>而后关上 slice 下的 MainAbilitySlice 文件，首先批改一下要加载的布局文件：
super.setUIContent(ResourceTable.Layout_position_layout);而后获取 Text 组件，并设置 positon，Java 示例代码如下：
package com.example.positionlayout.slice;
import com.example.positionlayout.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.AttrHelper;
import ohos.agp.components.Text;
public class MainAbilitySlice extends AbilitySlice {
@Override
public void onStart(Intent intent) {super.onStart(intent);
super.setUIContent(ResourceTable.Layout_position_layout);
// 获取 Text 组件
Text title = (Text)findComponentById(ResourceTable.Id_text1);
Text content1 = (Text)findComponentById(ResourceTable.Id_text2);
Text content2 = (Text)findComponentById(ResourceTable.Id_text3);
// ohos:position_x="200"
// ohos:position_y="60"
// 这里的参数 200，60，单位都是像素 px。title.setPosition(200, 60);
/*
因为在 xml 布局文件中，咱们应用的是 vp，不是 px，然而 setPosition() 办法的单位是 px，所以这里咱们转换一下。须要应用 AttrHelper 类。ohos.agp.components.AttrHelper 类：提供了 vp，fp 到 px 的转换
vp2px(float value, float density)-->static int 基于屏幕密度将虚构像素（vp）转换为像素值。*/
//AttrHelper.vp2px(20, AttrHelper.getDensity(this));// 将 20vp 转为 px
// ohos:position_x="20vp"
// ohos:position_y="100vp"
content1.
(AttrHelper.vp2px(20, AttrHelper.getDensity(this)), AttrHelper.vp2px(100, AttrHelper.getDensity(this)));
// ohos:position_x="150vp"
// ohos:position_y="250vp"
content2.setPosition(AttrHelper.vp2px(150, AttrHelper.getDensity(this)), AttrHelper.vp2px(250, AttrHelper.getDensity(this)));
}
}
而后启动模拟器运行：
<img src=”https://img.chengxuka.com/WX20210607-113258@2x.png/mark” alt=”WX20210607-113258@2x” style=”zoom:50%;” />
更多内容：
1、社区：鸿蒙巴士 https://www.harmonybus.net/
2、公众号：HarmonyBus
3、技术交换 QQ 群：714518656
4、视频课：https://www.chengxuka.com
正文完
