HarmonyOS Next 如何指定半模态高度？

Question

如何指定半模态高度？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

指定半模态的高度可以通过使用布局属性或样式来实现。
以下是几种在ArkTS中指定半模态高度的方法：

直接在组件中设置高度：
在定义组件时，可以直接在组件标签内通过height属性指定其高度。可以使用固定值如"200vp"或者相对值如"match_parent"。

@Component
struct SemiModal {
  build() {
    Column({ space: 5 }) {
      Text('Semi Modal Content')
        .width('100%')
        .height('200vp') // 直接设置高度
        .backgroundColor(Color.White)
        .borderRadius(10)
        .padding(10)
    }
    .alignItems(HorizontalAlign.Center)
    .width('100%')
    .height('fit_content') // 或者使用其他合适的值
  }
}

使用样式类：
定义一个样式类，并将该样式应用到你的半模态组件上。这种方式使得代码更加模块化和易于维护。

const styles = StyleSheet.create({
  semiModalStyle: {
    height: '200vp', // 设置高度
    width: '100%',
    backgroundColor: Color.White,
    borderRadius: 10,
    padding: 10,
  },
});

@Component
struct SemiModal {
  build() {
    Column({ space: 5 }) {
      Text('Semi Modal Content')
        .style(styles.semiModalStyle)
    }
    .alignItems(HorizontalAlign.Center)
    .width('100%')
    .height('fit_content')
  }
}

动态设置高度：
如果需要根据条件或用户操作动态调整半模态的高度，可以在代码中根据逻辑计算出高度值，并将其绑定到组件的高度属性上。

@Component
struct SemiModal {
  private modalHeight: string = '200vp';

  build() {
    Column({ space: 5 }) {
      Text('Semi Modal Content')
        .width('100%')
        .height(this.modalHeight) // 动态设置高度
        .backgroundColor(Color.White)
        .borderRadius(10)
        .padding(10)
    }
    .alignItems(HorizontalAlign.Center)
    .width('100%')
    .height('fit_content')
  }

  // 可能有一个方法来改变modalHeight的值
  private updateHeight(newHeight: string) {
    this.modalHeight = newHeight;
  }
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。