HarmonyOS NEXT 鸿蒙ArkTS 布局属性以及定位的基本使用、扩展模态转场

一、布局属性

1.1线性布局

column和row里面可以根据自己的主轴和交叉轴（侧轴）进行线性布局

Row(){}.justifyContent(FlexAlign.枚举值)
Row(){}.alignItems()(VerticalAlign.枚举值)
Column(){}.justifyContent(FlexAlign.枚举值)
Column(){}.alignItems(HorizontalAlign.枚举值)

单个子元素交叉轴对齐方式.alignSelf(ItemAlign.枚举值)+自适应缩放.layoutWeight()

1.2弹性布局

换行 Flex({wrap:FlexWrap.Wrap}) {}

1.3定位

绝对定位
position（）{x:水平偏移量,y:垂直偏移量}
相对定位
offset（）{x:水平偏移量,y:垂直偏移量}

`重点`

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

1.4层叠布局

 * 1. 基本语法：
 * Stack(){  可以写任意组件,Row,Column,Flex,Scroll,Image,Text,Button....  }
 *  默认行为：所有内部元素默认是按照中心来进行层叠显示的（对齐方式）
 *
 * 2. 改变一级组件的对齐方式
 * 我们可以通过Stack({alignContent:Alignment.方位})来改变
 * 内部所有的一级组件的对齐方式(影响所有的一级组件)
 *
 * 3. 修改stack里面的一级元素的层级
 * zIndex(数值)
 * 默认：后面的元素显示在上方，我们可以通过zIndex来修改层级
 * 数值越大，层级越高

1.5绝对定位和相对定位

绝对定位 position({x:水平偏移量,y：垂直偏移量}) 相对定位 offset({x:水平偏移量,y：垂直偏移量}) 其实绝对也不绝对，绝对定位也是相对父级元素的左顶点进行定位，父级元素动，自身也会跟着动区别：绝对定位相对父级左上角进行偏移定位，不占原有位置相对定位相对自身左上角进行偏移定位，仍占原有位置

二、模态转场

2.1 半模态转场

核心步骤：

定义状态变量，boolean
通过 Builder 定义结构
绑定半模态 bindSheet
修改状态变量，控制显示

@Entry
@Component
struct Page01_bindSheet {
  // 1. 定义状态变量，boolean
  @State isShow: boolean = false

  build() {
    Column() {
      Text('半模态转场')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      Button('显示半模态')
        // 3. 绑定半模态 bindSheet
        .bindSheet($$this.isShow, this.sheetBuilder())
        .onClick(() => {
          // 4. 修改状态变量，控制显示
          this.isShow = true
        })
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }

  // 2.通过 Builder 定义结构
  @Builder
  sheetBuilder() {
    Column() {

    }
    .backgroundColor(Color.Pink)
    .width('100%')
    .height('100%')
  }
}

说明

在非双向绑定情况下，以拖拽方式关闭半模态页面不会改变isShow参数的值。

为了使isShow参数值与半模态界面的状态同步，建议使用$$双向绑定isShow参数。

.bindSheet($$this.isShow, this.sheetBuilder())

给组件绑定半模态页面，点击后显示模态页面。

isShow: 是否显示半模态页面。

从API version 10开始，该参数支持$$双向绑定变量

builder: 配置半模态页面内容。

options: 配置半模态页面的可选属性。

可选属性sheetOptions

@Entry
@Component
struct Page02_bindSheetOptions {
  // isShow1 和 isShow2 分别控制不同的半模态
  @State isShow1: boolean = false
  @State isShow2: boolean = false

  build() {
    Column({ space: 20 }) {
      Text('半模态转场-常用属性' + this.isShow1)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      Button('显示半模态1-高度固定')// 3. 绑定半模态 bindSheet
        .bindSheet($$this.isShow1, this.sheetBuilder1(), {
          // height: SheetSize.MEDIUM// 枚举的方式设置
          height: 100// 设置具体的值
        })
        .onClick(() => {
          // 4. 修改状态变量，控制显示
          this.isShow1 = true
        })

      Button('显示半模态 2-切换高度档位')
        .bindSheet($$this.isShow2, this.sheetBuilder2(), {
          dragBar: true, // 是否显示控制条
          detents: [100, 200, 300] // 在多个不同的高度切换
        })
        .onClick(() => {
          this.isShow2 = true
        })

    }
    .width('100%')
    .height('100%')
    .padding(20)
  }

  @Builder
  sheetBuilder1() {
    Column() {
      Text('半模态 1')
        .fontSize(40)
    }
    .backgroundColor(Color.Pink)
    .width('100%')
    .height('100%')
  }

  @Builder
  sheetBuilder2() {
    Column() {
      Text('半模态 2')
        .fontSize(40)
    }
    .backgroundColor(Color.Orange)
    .width('100%')
    .height('100%')
  }
}

2.2 全屏模态

核心步骤：

定义状态变量，boolean
通过 Builder 定义结构
绑定全屏模态 bindContentCover
修改状态变量，控制显示

@Entry
@Component
struct Page05_bindContentCover {
  // 1. 定义状态变量，boolean
  @State isShow: boolean = false

  // 2.通过 Builder 定义结构
  @Builder
  myBuilder() {
    Column() {
      Button('关闭')
        .onClick(() => {
          this.isShow = false
        })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#0094ff')
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Column() {
      Button(`显示全屏模态${this.isShow}`)
        .fontSize(20)
        .margin(10)// 绑定全屏模态 bindContentCover
        .bindContentCover(this.isShow, this.myBuilder())
        .onClick(() => {
          // 修改状态变量，控制显示
          this.isShow = true
        })
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }
}