Harmony OS Next应用开发基础篇（五）-进阶布局

本文阐述了鸿蒙中进阶布局的绝对定位和相对定位概念。绝对定位通过明确指定组件相对于父容器的坐标来确定位置，组件可完全脱离常规布局流自由定位，但可能降低布局灵活性和适应性。相对定位基于组件在常规布局中的原始位置进行偏移，通过设置相对于父容器的偏移量来调整位置，有利于构建自适应和响应式布局。总之，绝对定位适用于精确固定位置，相对定位适用于适度调整并保持相对关系。

鸿蒙开天组●

1661人浏览 · 2024-10-28 20:52:40

鸿蒙开天组● · 2024-10-28 20:52:40 发布

各位小伙伴们我们又见面了,我就是鸿蒙开天组,下面让我们进入今天的学习,鸿蒙基础篇-进阶布局

在鸿蒙中：

绝对定位（AbsolutePositionLayout）：绝对定位是指组件在布局中的位置通过明确指定其相对于父容器的坐标来确定。使用绝对定位时，组件的位置不受其他组件的影响，它将精确放置在指定的坐标位置上。这使得组件可以完全脱离常规的布局流，自由地定位在布局中的任何位置。但过度使用绝对定位可能导致布局的灵活性降低，难以适应不同的屏幕尺寸和设备方向。

相对定位（RelativePositionLayout）：相对定位则是基于组件在常规布局中的原始位置进行偏移。组件的位置是相对于其在正常流中的位置进行调整的。

例如，可以设置组件相对于父容器的顶部、底部、左边或右边有一定的偏移量。相对定位在保持与其他组件相对关系的同时，提供了一定的灵活性来微调组件的位置，更有利于构建自适应和响应式的布局。

总的来说，绝对定位适合需要精确固定位置且不依赖其他组件的情况，而相对定位适用于在保持相对关系的基础上进行适度位置调整的场景。

定位

作用：改变组件位置

分类：

绝对定位：position，相对父组件左上角进行偏移
相对定位：offset，相对自身左上角进行偏移

绝对定位

属性：position()

参数：{x: 水平偏移量, y: 垂直偏移量}

偏移量取值

数字，单位是vp
百分比，参照父组件尺寸计算结果

绝对定位特点：

参照父组件左上角进行偏移
绝对定位后的组件不再占用自身原有位置

相对定位

属性：offset()

参数：{x: 水平偏移量, y: 垂直偏移量}

偏移量取值

数字，单位是vp
百分比，参照父组件尺寸计算结果

相对定位特点：

相对自身左上角进行偏移
相对定位后的组件仍然占用自身原有位置

Z 序控制

定位后的组件，默认后定义的组件在最上面显示，可以通过 zIndex 属性调整显示层级

属性：zIndex(数字)

特点：取值为整数数字，取值越大，显示层级越高

下面展示一个案例来理解:

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('内容1')
        .width(100)
        .height(50)
        .backgroundColor(Color.Pink)
        .position({x: 0, y:0})
          // Z 轴显示顺序，取值越大，显示层级越高
        .zIndex(1)
      Text('内容2')
        .width(200)
        .height(60)
        .backgroundColor(Color.Orange)
        .position({x: 50,y: 30})

    }
    .width(300)
    .height(200)
    .backgroundColor('#ccc')
  }
}

层叠布局

层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过 Stack 容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。

层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。

基本使用

Stack 组件为容器组件，容器内可包含各种子元素。其中子元素默认进行居中堆叠。子元素被约束在Stack下，进行自己的样式定义以及排列。

对齐方式

参数：alignContent

取值：枚举 Alignment

名称	描述
TopStart	顶部起始端
Top	顶部横向居中
TopEnd	顶部尾端
Start	起始端纵向居中
Center	居中（默认）
End	尾端纵向居中
BottomStart	底部起始端
Bottom	底部横向居中
BottomEnd	底部尾端

Z 序控制

属性：zIndex(数字)

特点：取值为整数数字，取值越大，显示层级越高

通用属性

多态样式

属性：stateStyles()

参数	描述
normal	组件无状态时的样式（默认状态）
pressed	组件按下状态的样式
disabled	组件禁用状态的样式
focused	组件获焦状态的样式
clicked	组件点击状态的样式

动画 animation

组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。

属性：animation(参数)

参数： {}

参数	描述
duration	设置动画时长。默认值：1000 单位：毫秒
curve	设置动画曲线默认值：`Curve.EaseInOut`
delay	设置动画延迟执行的时长。默认值：0，不延迟播放。单位：毫秒
iterations	设置播放次数。默认值：1 设置为-1时表示无限次播放。设置为0时表示无动画效果。

下面展示一个案例来理解:

@Entry
@Component
struct Index {
  // animation
  // 动画 :  让某些外观属性变化时, 产生慢慢变化的效果
  // 注意 : 动画必须配合外观属性变化, 才会有效果
  build() {
    Column() {
      Text('嗨起来')
        .width(50)
        .height(50)
        .backgroundColor(Color.Pink)
        .stateStyles({
          pressed: {
            .width(150)
            .backgroundColor(Color.Green)
          }
        })
        .animation({
          duration: 1000, // 动画持续事件, ms  一般取值是300-500ms
          // curve: Curve.EaseIn, // 动画运动的曲线, 一般不写, 观察不到效果
          // delay: 2000, // 延迟执行的时间
          iterations: -1  // 默认只执行一次, -1表示无限执行动画
        })

    }
    .width('100%')
    .height('100%')
    .backgroundColor('#eee')
    .padding(20)
  }
}