氣泡提示（Popup）

文本提示氣泡

文本提示氣泡常用于只展示帶有文本的信息提示，不帶有任何交互的場(chǎng)景。Popup屬性需綁定組件，當(dāng)bindPopup屬性中參數(shù)show為true的時(shí)候會(huì)彈出氣泡提示。

在Button組件上綁定Popup屬性，每次點(diǎn)擊Button按鈕，handlePopup會(huì)切換布爾值，當(dāng)其為true時(shí)，觸發(fā)bindPopup彈出氣泡。

添加氣泡狀態(tài)變化的事件

通過onStateChange參數(shù)為氣泡添加狀態(tài)變化的事件回調(diào)，可以判斷當(dāng)前氣泡的顯示狀態(tài)。

@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',
          onStateChange: (e)=> { // 返回當(dāng)前的氣泡狀態(tài)
            if (!e.isVisible) {
              this.handlePopup = false
            }
          }
        })
    }.width('100%').padding({ top: 5 })
  }
}

帶按鈕的提示氣泡

通過primaryButton、secondaryButton屬性為氣泡最多設(shè)置兩個(gè)Button按鈕，通過此按鈕進(jìn)行簡(jiǎn)單的交互，開發(fā)者可以通過配置action參數(shù)來設(shè)置想要觸發(fā)的操作。

@Entry
@Component
struct PopupExample22 {
  @State handlePopup: boolean = false

  build() {
    Column() {
      Button('PopupOptions').margin({ top: 200 })
        .onClick(() => {
          this.handlePopup = !this.handlePopup
        })
        .bindPopup(this.handlePopup, {
          message: 'This is a popup with PopupOptions',
          primaryButton: {
            value: 'Confirm',
            action: () => {
              this.handlePopup = !this.handlePopup
              console.info('confirm Button click')
            }
          },
          secondaryButton: {
            value: 'Cancel',
            action: () => {
              this.handlePopup = !this.handlePopup
            }
          },
          onStateChange: (e) => {
            if (!e.isVisible) {
              this.handlePopup = false
            }
          }
        })
    }.width('100%').padding({ top: 5 })
  }
}

自定義氣泡

開發(fā)者可以使用構(gòu)建器CustomPopupOptions創(chuàng)建自定義氣泡，@Builder中可以放自定義的內(nèi)容。除此之外，還可以通過popupColor等參數(shù)控制氣泡樣式。

@Entry
@Component
struct Index {
  @State customPopup: boolean = false
  // popup構(gòu)造器定義彈框內(nèi)容
  @Builder popupBuilder() {
    Row({ space: 2 }) {
      Image($r("app.media.icon")).width(24).height(24).margin({ left: 5 })
      Text('This is Custom Popup').fontSize(15)
    }.width(200).height(50).padding(5)
  }
  build() {
    Column() {
      Button('CustomPopupOptions')
        .position({x:100,y:200})
        .onClick(() => {
          this.customPopup = !this.customPopup
        })
        .bindPopup(this.customPopup, {
          builder: this.popupBuilder, // 氣泡的內(nèi)容
          placement:Placement.Bottom, // 氣泡的彈出位置
          popupColor:Color.Pink, // 氣泡的背景色
          onStateChange: (e) => {
            console.info(JSON.stringify(e.isVisible))
            if (!e.isVisible) {
              this.customPopup = false
            }
          }
        })
    }
    .height('100%')
  }
}