Popup控制

给组件绑定popup弹窗，并设置弹窗内容，交互逻辑和显示状态。

说明：



开发前请熟悉鸿蒙开发指导文档

：[

gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md

]

从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

接口

PopupOptions类型说明

PopupMessageOptions10+类型说明

CustomPopupOptions8+类型说明

示例

示例1

// xxx.ets
@Entry
@Component
struct PopupExample {
  @State handlePopup: boolean = false
  @State customPopup: boolean = false

  // popup构造器定义弹框内容
  @Builder popupBuilder() {
    Row({ space: 2 }) {
      Image($r("app.media.image")).width(24).height(24).margin({ left: -5 })
      Text('Custom Popup').fontSize(10)
    }.width(100).height(50).padding(5)
  }

  build() {
    Flex({ direction: FlexDirection.Column }) {
      // PopupOptions 类型设置弹框内容
      Button('PopupOptions')
        .onClick(() = > {
          this.handlePopup = !this.handlePopup
        })
        .bindPopup(this.handlePopup, {
          message: 'This is a popup with PopupOptions' 

          showInSubWindow:false 

          primaryButton: {
            value: 'confirm' 

            action: () = > {
              this.handlePopup = !this.handlePopup
              console.info('confirm Button click')
            }
          },
          // 第二个按钮
          secondaryButton: {
            value: 'cancel' 

            action: () = > {
              this.handlePopup = !this.handlePopup
              console.info('cancel Button click')
            }
          },
          onStateChange: (e) = > {
            console.info(JSON.stringify(e.isVisible))
            if (!e.isVisible) {
              this.handlePopup = false
            }
          }
        })
        .position({ x: 100 
 y: 50 })


      // CustomPopupOptions 类型设置弹框内容
      Button('CustomPopupOptions')
        .onClick(() = > {
          this.customPopup = !this.customPopup
        })
        .bindPopup(this.customPopup, {
          builder: this.popupBuilder,
          placement: Placement.Top,
          mask: {color:'0x33000000'},
          popupColor: Color.Yellow,
          enableArrow: true 

          showInSubWindow: false 

          onStateChange: (e) = > {
            if (!e.isVisible) {
              this.customPopup = false
            }
          }
        })
        .position({ x: 80 
 y: 200 })
    }.width('100%').padding({ top: 5 })
  }
}

示例2

// xxx.ets
@Entry
@Component
struct PopupExample {
  @State handlePopup: boolean = false

  build() {
    Column() {
      Button('PopupOptions')
        .onClick(() = > {
          this.handlePopup = !this.handlePopup
        })
        .bindPopup(this.handlePopup, {
          message: 'This is a popup with PopupOptions' 

          messageOptions: {
            textColor: Color.Red,
            font: {
              size: '14vp' 

              style: FontStyle.Italic,
              weight: FontWeight.Bolder
            }
          },
          placement: Placement.Bottom,
          enableArrow: false 

          targetSpace: '15vp' 

          onStateChange: (e) = > {
            console.info(JSON.stringify(e.isVisible))
            if (!e.isVisible) {
              this.handlePopup = false
            }
          }
        })
    }.margin(20)
  }
}

`HarmonyOS与OpenHarmony鸿蒙文档籽料：mau123789是v直接拿`

示例3

// xxx.ets
@Entry
@Component
struct PopupExample {
  @State customPopup: boolean = false

  // popup构造器定义弹框内容
  @Builder popupBuilder() {
    Row() {
      Text('Custom Popup Message').fontSize(10)
    }.height(50).padding(5)
  }

  build() {
    Column() {
      // CustomPopupOptions 类型设置弹框内容
      Button('CustomPopupOptions')
        .onClick(() = > {
          this.customPopup = !this.customPopup
        })
        .bindPopup(this.customPopup, {
          builder: this.popupBuilder,
          targetSpace: '15vp' 

          enableArrow: false 

          onStateChange: (e) = > {
            if (!e.isVisible) {
              this.customPopup = false
            }
          }
        })
    }.margin(20)
  }
}

审核编辑 黄宇