HarmonyOS 鸿蒙Next bindSheet

Index.ets

// Index.ets
import { CustomPopDialog } from './CustomPopDialog'
import {DialogController} from './DialogController'
@Entry
@Component
struct LoginPage {
  controller: DialogController = new DialogController()
  build() {
    Column() {
      CustomPopDialog({
        controller: this.controller,
        dialogHeight: '70%'
      }) {
        Column() {
          Text('快速登录')
            .fontWeight(FontWeight.Bold)
            .onClick(() => {
              this.controller.openDialog()
            });
        }
        .width('100%').height('90%').constraintSize({maxHeight:'90%'})
      }
      Column(){
        Button('快速登陆')
      }.height('10%').width('100%').onClick(() => {
        this.controller.openDialog()
      }).backgroundColor(Color.Red);
    }.justifyContent(FlexAlign.SpaceBetween)
    .width('100%')
    .height('100%')
  }
}

CustomPopDialog.ets

// CustomPopDialog.ets
import { DialogController } from './DialogController';
@Component
export struct CustomPopDialog {
  private controller: DialogController | undefined;
  @Prop dialogWidth: Length = '100%' // 弹框的宽度度
  @Prop dialogHeight: Length = 400 // 弹框的高度
  @Prop radius: number = 16 // 圆角
  @Prop maskColor: ResourceColor = '#4d000000' // 背景蒙层颜色
  @State title: string = '帐号密码登录' // 短信验证码登录
  @State subTitle: string = '登录帐号以使用更多服务' // 未注册手机号验证通过后将自动注册
  @State openState: number = 0;
  @BuilderParam slotPage: () => void = this.doNothingBuilder;
  @Builder
  doNothingBuilder() {
  }
  aboutToAppear() {
    if (this.controller) {
      this.controller.dialogCallback = (state: number) => {
        if (this.openState == state) {
          return;
        }
        this.openState = state;
      }
    }
  }
  @Builder
  header() {
    Row() {
      Image($r('app.media.startIcon'))
        .width(26).height(26)
        .onClick(() => {
          this.controller?.closeDialog()
        })
    }
    .width('100%')
    .padding(14)
    .justifyContent(FlexAlign.End)
  }
  @Builder
  body() {
    Column() {
      Text(this.title)
        .fontSize(24)
        .fontWeight(FontWeight.Medium)
        .fontColor('#182431')
      Text(this.subTitle)
        .fontSize(12)
        .fontColor('#99182431')
        .margin({ bottom: 30, top: 8 })
    }
    .width('100%')
    .padding({ left: 14, right: 14 })
    .alignItems(HorizontalAlign.Start)
  }
  build() {
    Stack({ alignContent: Alignment.Center }) {
      this.slotPage()
      if (this.openState == 1) {
        // mask蒙层
        Column() {
        }
        .width('100%')
        .height('100%')
        .backgroundColor(this.maskColor)
        // 具体内容
        Column() {
          Column() {
            this.header() // 标题
            this.body() // 内容
          }
          .backgroundColor(Color.White)
          .width(this.dialogWidth)
          .height(this.dialogHeight)
          .borderRadius({ topLeft: this.radius, topRight: this.radius })
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.End)
        .transition(TransitionEffect.OPACITY.animation({ duration: 200 })
          .combine(TransitionEffect.translate({ y: 100 })))
      }
    }
    .width('100%')
    .height('90%')
  }
}

DialogController.ets

// DialogController.ets
export class DialogController {
  public dialogCallback: (state: number) => void = (state: number) => {
  };
  openDialog() {
    this.dialogCallback?.(1)
  }
  closeDialog() {
    this.dialogCallback?.(0)
  }
}