子组件:

@Component
export  struct PageOne {

  @Link isShow: boolean; //子组价中需要的值用link修饰
  @Builder
  build() {
    Column() {

      Button("close modal")
        .margin(10)
        .fontSize(20)
        .onClick(() => {
          this.isShow = false; 
        })
    }
    .width('100%')
    .height('100%')

  }
}

父组件:

import { PageOne } from './PageOne'

@Entry
@Component
struct SheetTransitionExample {
  @State isShow: boolean=false ;//注意这里不要写成了link
 
  @Builder
  myBuilder() {
    PageOne({ isShow: this.isShow })//这里用到的modal框,因此需要用@Builder修饰
  }

  build() {
    Column() {
      Button("拉起半模态")
        .onClick(() => {
          this.isShow = true;
        })
        .fontSize(20)
        .margin(10)
        .bindSheet($$this.isShow, this.myBuilder(), {
          height: "90%",
          backgroundColor: Color.Green,
          preferType: SheetType.CENTER,
          enableHoverMode: this.enableHoverMode,
          hoverModeArea: this.hoverModeArea
        })
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }
}

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐