【HarmonyOS NEXT星河版开发学习】小型测试案例08-人气卡片

个人主页→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%')
  }
}