Popup彈窗控制

2024-01-22 16:18 更新

給組件綁定popup彈窗，并設(shè)置彈窗內(nèi)容，交互邏輯和顯示狀態(tài)。

說(shuō)明
  • 從API Version 7開(kāi)始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。
  • popup彈窗的顯示狀態(tài)在onStateChange事件回調(diào)中反饋，其顯隱與組件的創(chuàng)建或銷毀無(wú)強(qiáng)對(duì)應(yīng)關(guān)系。

接口

名稱

參數(shù)類型

描述

bindPopup

show: boolean,

popup: PopupOptions | CustomPopupOptions8+

給組件綁定Popup彈窗，設(shè)置參數(shù)show為true彈出彈框。

show: 彈窗顯示狀態(tài)，默認(rèn)值為false，隱藏彈窗。popup彈窗必須等待頁(yè)面全部構(gòu)建完成才能展示，因此show不能在頁(yè)面構(gòu)建中設(shè)置為true，否則會(huì)導(dǎo)致popup彈窗顯示位置及形狀錯(cuò)誤。

popup: 配置當(dāng)前彈窗提示的參數(shù)。

PopupOptions類型說(shuō)明

名稱

類型

必填

描述

message

string

是

彈窗信息內(nèi)容。

placementOnTop

boolean

否

是否在組件上方顯示，默認(rèn)值為false。

primaryButton

{

value: string,

action: () => void

}

否

第一個(gè)按鈕。

value: 彈窗里主按鈕的文本。

action: 點(diǎn)擊主按鈕的回調(diào)函數(shù)。

secondaryButton

{

value: string,

action: () => void

}

否

第二個(gè)按鈕。

value: 彈窗里輔助按鈕的文本。

action: 點(diǎn)擊輔助按鈕的回調(diào)函數(shù)。

onStateChange

(event: { isVisible: boolean }) => void

否

彈窗狀態(tài)變化事件回調(diào)，參數(shù)isVisible為彈窗當(dāng)前的顯示狀態(tài)。

arrowOffset9+

Length

否

popup箭頭在彈窗處的偏移。箭頭在氣泡上下方時(shí)，數(shù)值為0表示箭頭居最左側(cè)，偏移量為箭頭至最左側(cè)的距離，默認(rèn)居中。箭頭在氣泡左右側(cè)時(shí)，偏移量為箭頭至最上側(cè)的距離，默認(rèn)居中。如果顯示在屏幕邊緣，氣泡會(huì)自動(dòng)左右偏移，數(shù)值為0時(shí)箭頭始終指向綁定組件。

showInSubWindow9+

boolean

否

是否在子窗口顯示氣泡，默認(rèn)值為false。

CustomPopupOptions8+類型說(shuō)明

名稱

類型

必填

描述

builder

CustomBuilder

是

提示氣泡內(nèi)容的構(gòu)造器。

說(shuō)明：

popup為通用屬性，自定義popup中不支持再次彈出popup。對(duì)builder下的第一層容器組件不支持使用position屬性，如果使用將導(dǎo)致氣泡不顯示。

builder中若使用自定義組件，自定義組件的aboutToAppear和aboutToDisappear生命周期與popup彈窗的顯隱無(wú)關(guān)，不能使用其生命周期判斷popup彈窗的顯隱。

placement

Placement

否

氣泡組件優(yōu)先顯示的位置，當(dāng)前位置顯示不下時(shí)，會(huì)自動(dòng)調(diào)整位置。

默認(rèn)值：Placement.Bottom

popupColor

ResourceColor

否

提示氣泡的顏色。

enableArrow

boolean

否

是否顯示箭頭。

從API Version 9開(kāi)始，如果箭頭所在方位側(cè)的氣泡長(zhǎng)度不足以顯示下箭頭，則會(huì)默認(rèn)不顯示箭頭。比如：placement設(shè)置為L(zhǎng)eft，此時(shí)如果氣泡高度小于箭頭的寬度（32vp）與氣泡圓角兩倍（48vp）之和（80vp），則實(shí)際不會(huì)顯示箭頭。

默認(rèn)值：true

autoCancel

boolean

否

頁(yè)面有操作時(shí)，是否自動(dòng)關(guān)閉氣泡。

默認(rèn)值：true

onStateChange

(event: { isVisible: boolean }) => void

否

彈窗狀態(tài)變化事件回調(diào)，參數(shù)為彈窗當(dāng)前的顯示狀態(tài)。

arrowOffset9+

Length

否

popup箭頭在彈窗處的偏移。箭頭在氣泡上下方時(shí)，數(shù)值為0表示箭頭居最左側(cè)，偏移量為箭頭至最左側(cè)的距離，默認(rèn)居中。箭頭在氣泡左右側(cè)時(shí)，偏移量為箭頭至最上側(cè)的距離，默認(rèn)居中。如果顯示在屏幕邊緣，氣泡會(huì)自動(dòng)左右偏移，數(shù)值為0時(shí)箭頭始終指向綁定組件。

showInSubWindow9+

boolean

否

是否在子窗口顯示氣泡，默認(rèn)值為false。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct PopupExample {
  5.   @State handlePopup: boolean = false
  6.   @State customPopup: boolean = false
  7. 

  8.   // popup構(gòu)造器定義彈框內(nèi)容
  9.   @Builder popupBuilder() {
  10.     Row({ space: 2 }) {
  11.       Image($r("app.media.image")).width(24).height(24).margin({ left: -5 })
  12.       Text('Custom Popup').fontSize(10)
  13.     }.width(100).height(50).padding(5)
  14.   }
  15. 

  16.   build() {
  17.     Flex({ direction: FlexDirection.Column }) {
  18.       // PopupOptions 類型設(shè)置彈框內(nèi)容
  19.       Button('PopupOptions')
  20.         .onClick(() => {
  21.           this.handlePopup = !this.handlePopup
  22.         })
  23.         .bindPopup(this.handlePopup, {
  24.           message: 'This is a popup with PopupOptions',
  25.           placementOnTop: true,
  26.           showInSubWindow:false,
  27.           primaryButton: {
  28.             value: 'confirm',
  29.             action: () => {
  30.               this.handlePopup = !this.handlePopup
  31.               console.info('confirm Button click')
  32.             }
  33.           },
  34.           // 第二個(gè)按鈕
  35.           secondaryButton: {
  36.             value: 'cancel',
  37.             action: () => {
  38.               this.handlePopup = !this.handlePopup
  39.               console.info('cancel Button click')
  40.             }
  41.           },
  42.           onStateChange: (e) => {
  43.             console.info(JSON.stringify(e.isVisible))
  44.             if (!e.isVisible) {
  45.               this.handlePopup = false
  46.             }
  47.           }
  48.         })
  49.         .position({ x: 100, y: 50 })
  50. 

  51. 

  52.       // CustomPopupOptions 類型設(shè)置彈框內(nèi)容
  53.       Button('CustomPopupOptions')
  54.         .onClick(() => {
  55.           this.customPopup = !this.customPopup
  56.         })
  57.         .bindPopup(this.customPopup, {
  58.           builder: this.popupBuilder,
  59.           placement: Placement.Top,
  60.           maskColor: '0x33000000',
  61.           popupColor: Color.Yellow,
  62.           enableArrow: true,
  63.           showInSubWindow: false,
  64.           onStateChange: (e) => {
  65.             if (!e.isVisible) {
  66.               this.customPopup = false
  67.             }
  68.           }
  69.         })
  70.         .position({ x: 80, y: 200 })
  71.     }.width('100%').padding({ top: 5 })
  72.   }
  73. }

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)