定位和层叠的概念和基础语法

一. 定位：改变组件位置

定位的分类 { 绝对定位和相对定位 }

1. 绝对定位的特点： 相对父组件左上角进行偏移，2. 绝对定位后的组件不再占用自身原有位置
   语法： 组件（）.position（{x: 水平偏移量,y: 垂直偏移量 }）

** 案例展示 **

Column(){
    Image($r('app.media.flower'))
      .width(100)
    Text('vip')
      .width(50)
      .height(20)
      .position({x: 0, y: 0})
      .fontSize(14)
      .fontWeight(700)
      .backgroundColor('#f2902e')
      .border({
        width: 2,
        color: '#f2de9d'
      })
      .borderRadius({
        topLeft: 10,
        bottomRight: 10
      })
      .textAlign(TextAlign.Center)
      .fontStyle(FontStyle.Italic)
      .fontColor('#fcdb77')

}
.borderRadius(10)
.padding({bottom: 10})
.width(300)
.backgroundColor(Color.White)
.margin({top: 20})

效果图

2. 相对定位的特点：① 相对自身左上角进行偏移 ② 相对定位后的组件还是会占用自身原有位置 语法： 组件（）.offset({ x：水平方向的偏移量， y:垂直方向的偏移量})

案例展示

@Entry
@Component
struct page75 {
build() {
  Column() {
    Text('内容1')
      .width(80)
      .height(40)
      .backgroundColor(Color.Pink)
    Text('内容2')
      .width(80)
      .height(40)
      .backgroundColor(Color.Orange)
        // 占位
   ** .offset({
        x: 100,
        y: -30
      }) **
    Text('内容3')
      .width(80)
      .height(40)
      .backgroundColor(Color.Brown)
  }
  .width('100%')
  .height(200)
  .backgroundColor('#ccc')
}
}

效果图

二. 层叠布局 Stack也是一个容器组件

层叠布局的基本概念： 后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。

1. 层叠布局的默认行为 ：所有内部元素默认是按照中心来进行层叠显示的（对齐方式）
2. 层叠布局的基本语法 ：Stack（） { 容器内可包含各种子元素 例如（column，row, text, Button, flex.....等） }

基本属性展示

@Entry
@Component
struct Index {
  build() {
    Column(){
      Stack() {
        Column(){}
        .width('90%')
        .height(130)
        .backgroundColor(Color.Gray)
        Text('text')
          .width('60%')
          .height('60%')
          .backgroundColor(Color.Orange)
        Button('button')
          .width('30%')
          .height('30%')
          .backgroundColor('#ff8ff3eb')
          .fontColor('#000')
      }
      .width('100%')
      .height(150)
      .backgroundColor(Color.Pink)
    }
    .margin(10)
  }
}

效果图

3. 层叠布局的对齐方式 ：我们可以通过Stack() { alignContent:alignment.方位}来改变stack内的一级元素。

4. 层叠布局的方位词有：①：TopStart（左上角）②：top (顶部横向居中) ③:topend(顶部尾端) ④：start(起始端纵向居中) ⑤：center(居中) ⑥：end(尾端纵向居中) ⑦:BottomStart(底部横向居中) ⑧:ButtomEnd(底部尾端)

5. 层叠布局的 Z序控制:是来控制组件的层级关系的 层叠布局的Z序控制的语法 想要控制的组件（）.zIndex(数字)

@Entry
@Component
struct Index {
  build() {
    Column(){
      Stack({ alignContent: Alignment.BottomEnd }) {
        Column(){}
        .width('90%')
        .height(130)
        .backgroundColor(Color.Gray)
        Text('text')
          .width('60%')
          .height('60%')
          .backgroundColor('rgba(0,0,0,0.3)')
          // Z 序：显示在按钮上一层
          .zIndex(1)
        Button('button')
          .width('30%')
          .height('30%')
          .backgroundColor('#ff8ff3eb')
          .fontColor('#000')
      }
      .width('100%')
      .height(150)
      .backgroundColor(Color.Pink)
    }
    .margin(10)
  }
}

效果图