CustomDialog弹窗，bindContentCover做的弹窗

做了一个CustomDialog弹窗，用于输入数字。

@Entry
@Component
struct Page6 {
  @State message1: string = '默认值'
  controller: CustomDialogController = new CustomDialogController({
    builder: TextDialog({
      confirm: (value) => {
        this.message1 = value
      }
    }), //要加括号,要在这里传参
    alignment: DialogAlignment.Bottom, //控制弹窗位置
    offset: { dx: 0, dy: -30 }//位置微调 -- 源码来自 wb98.com
  })

  build() {

    Column({ space: 20 }) {
      Text(this.message1)

      Button('弹出 Dialog')
        .onClick(() => {
          this.controller.open()
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.Green)
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  }
}

//========================
@CustomDialog
  //自定义弹窗，可以自由输入数字
struct TextDialog {
  controller: CustomDialogController = new CustomDialogController({
    builder: TextDialog()//控制的对话框名，要加括号
  })
  confirm: (value: string) => void = () => {
  } //回调函数
  value1: string = ''

  build() {
    Column({ space: 10 }) {
      Text('请输入你的答案')
      TextInput({ placeholder: '请输入数字', text: '' })
        .width('80%')
        .type(InputType.Number)
        .onChange((value) => {
          this.value1 = value
        })
      Row({ space: 30 }) {
        Button('取消')
          .onClick(() => {
            this.controller.close()
          })
        Button('确定')
          .onClick(() => {
            this.confirm(this.value1) //通过自定义弹窗的回调函数来获得一个值
            this.controller.close()
          })
      }
    }.padding(20)
  }
}

下面2段代码都是用bindContentCover做的弹窗，高仿上面做的CustomDialog弹窗，也是用于输入数字。

代码1：

@Entry
@Component
struct Page5 {
  @State isShow: boolean = false
  @State message: string = '默认值'
  messageZJ: string = ''

  @Builder
  myBuilder() {
    Stack({ alignContent: Alignment.Bottom }) { //这里调节弹窗位置
      // 父容器透明背景
      Column() {
        // 空容器仅用于布局的底部透明背景
      }
      .width('100%')
      .height('100%')
      // .backgroundColor(Color.Transparent)//纯透明
      // .backgroundColor('rgba(0,0,0,0.7)') //黑色背景，0.7透明度
      .backgroundColor('#8b555555') //这2句是为弹窗加上半透明的背景
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

      // 子组件按钮
      Column({ space: 10 }) {

        Column({ space: 10 }) { //内层容器

          TextInput({ placeholder: '请输入文本', text: '默认文本' })
            .width('80%')
            .type(InputType.Number)
            .cancelButton({
              //右边的X按钮
              icon: { size: 16 }
            })
            .onChange((value: string) => {
              // console.log('这是：', value)
              this.messageZJ = value
            })

          Row({ space: 20 }) {
            Button('取消')
              .onClick(() => {
                this.isShow = false
              })
            Button('确定')
              .onClick(() => {
                this.message = this.messageZJ
                this.isShow = false
              })
          }
        }
        .backgroundColor(Color.White) //中间对话框背景颜色
        .width('100%')
        .padding(20)
        .borderRadius(10)
      }
      .backgroundColor(Color.Transparent)
      .width('80%')
      .margin({bottom:30}) //弹窗位置微调 wb86.com
    }

  }

  //----------------------------


  build() {

    Column({space:50}) {

      Text(this.message)
        .bindContentCover($$this.isShow, this.myBuilder(),
          {
            modalTransition: ModalTransition.NONE, //DEFAULT从下往上,ALPHA是透明度变化
            // backgroundColor: Color.Pink
          })
        .fontColor(Color.White)

      Button('弹出 Stack')
        .onClick(() => {
          this.isShow =true
        })
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
    .backgroundColor('#8b555555')
    .backgroundColor(Color.Green)
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

  }
}

代码2：

@Entry
@Component
struct Page7 {

  @State isShow: boolean = false
  @State message: string = '默认值'
  messageZJ: string = ''

  @Builder
  myBuilder() {

    Column() {
      // 子组件设置不透明背景色
      Column({ space: 10 }) {

        Column({ space: 10 }) { //内层容器

          TextInput({ placeholder: '请输入文本', text: '默认文本' })
            .width('80%')
            .type(InputType.Number)
            .textIndent(0)//设置首行文本缩进
            .cancelButton({
              //右边的X按钮
              icon: { size: 16 }
            })
            .onChange((value: string) => {
              this.messageZJ=value
            })

          Row({ space: 20 }) {
            Button('取消')
              .onClick(() => {
                this.isShow = false
              })
            Button('确定')
              .onClick(() => {
                this.message = this.messageZJ
                this.isShow = false
              })
          }
        }
        .backgroundColor(Color.White)
        .width('100%')
        .padding(20)
        .borderRadius(10)


      }
      .backgroundColor(Color.Transparent)
      .width('80%')
      .height('100%')
      .justifyContent(FlexAlign.End)
      .offset({y:-30})
    }
    .width('100%')
    .height('100%')
    // .backgroundColor(Color.Transparent)//纯透明--源码来自 wb86.com
    // .backgroundColor('rgba(0,0,0,0.7)') //黑色背景，0.7透明度
    .backgroundColor('#8b555555') //这2句是为弹窗加上半透明的背景
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

  }

  build() {

    Column({space:20}){
      Text(this.message)
        .fontColor(Color.White)

      Button('确定 Column')
        .bindContentCover($$this.isShow, this.myBuilder(),
          {
            modalTransition: ModalTransition.NONE, //DEFAULT从下往上,ALPHA是透明度变化
            // backgroundColor: Color.Pink
          })
        .onClick(() => {
          this.isShow=!this.isShow
        })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Green)
    .justifyContent(FlexAlign.Center)
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])


  }
}

打赏 支付宝打赏 微信打赏

来源：济亨网

本文链接：https://wb98.com/post/391.html