个人主页→VON
收录专栏→鸿蒙开发小型案例总结
基础语法部分会发布于github 和 gitee上面（暂未发布）
前言
鸿蒙开发中的绝对定位和层级是关键的布局和设计概念，它们通过特定的属性和方式决定了组件在界面上的位置和层叠顺序。
知识点概述
鸿蒙OS（HarmonyOS）是基于微内核的全场景分布式操作系统，其开发环境提供了丰富的功能和工具，使得开发者可以构建适应多设备的应用程序。在UI设计和布局构建过程中，绝对定位和层级是两个非常关键的概念。它们不仅影响组件在页面上的具体位置，还涉及到多个元素之间的层叠关系。
绝对定位：
这种定位方式是通过相对于其上级容器（通常是父组件）的坐标系统来确定位置的。在鸿蒙开发中，可以通过position()函数来实现绝对定位。该函数接受一个包含x（水平偏移量）和y（垂直偏移量）的对象参数，用于控制组件从其父组件的左上角偏移的具体位置。
层级管理：
在界面设计中，有时需要重叠显示多个组件，例如弹窗、悬浮按钮等。为了管理这些元素的层叠顺序，鸿蒙开发引入了zIndex属性。该属性决定了组件的堆叠顺序，取值为整数数字，数值越大，组件显示的层级越高。
层级控制
在HarmonyOS中，层级控制主要通过布局组件的嵌套来实现。在上面的例子中，Stack组件被用来创建一个层次结构，在这个结构中，后添加的子组件会显示在前面添加的子组件之上。
如果你需要更精细地控制层级，可以考虑以下方法：
- 使用
Stack组件时，子组件的顺序决定了它们的显示层级，最后添加的子组件会在最上层。 - 如果需要动态调整层级，你可能需要在代码中动态构建布局或使用可编程UI的方式进行更新。
相对定位与绝对定位的对比：
虽然绝对定位以父组件为基准进行定位，相对定位则是以组件自身的中心为原点进行定位。这种定位方式在移动后仍会占据原来的位置。
鸿蒙开发实践：
在实际的鸿蒙应用开发中，利用上述定位方式可以实现各种复杂的布局需求。例如，可以使用Stack容器来轻松实现卡片层叠效果，并通过zIndex调整它们的显示顺序。此外，固定定位也是一种常见的需求，如将某些操作按钮或导航栏固定在屏幕特定位置。
界面效果展示
代码展示
@Entry
@Component
struct Index {
build() {
Column(){
Column(){
// vip图标
Text('VIP')
.position({
x:0,
y:0
})
.zIndex(1)
.width(40)
.height(20)
.backgroundColor('#e49642')
.borderRadius({topLeft:10,bottomRight:10})
.border({width:2,color:'#fbe7a3'})
.fontColor('#fbe7a3')
.fontStyle(FontStyle.Italic)
.fontSize(14)
.fontWeight(700)
.textAlign(TextAlign.Center)
// 图一
Image($r('app.media.fg_text_01'))
.width('100%')
.height(210)
.borderRadius(10)
// 图二及其文字
Row() {
Image($r('app.media.fg_text_02'))
.width(20)
.margin({
right: 6,
top: 5,
left:6
})
.backgroundColor('#55b7f4')
.borderRadius(10)
.padding(3)
.fillColor(Color.White)
Text('小狗Dog')
.fontWeight(700)
.fontSize(18)
.margin({ top: 5 })
}
.height(30)
.width('100%')
}
.width(160)
.height(240)
}
.width('100%')
.height('100%')
}
}
