鴻蒙HarmonyOS實戰-ArkUI元件（Popup）

蜀道山QAQ發表於2024-04-10
鴻蒙UI元件

🚀一、Popup

Popup元件通常用於在螢幕上彈出一個對話方塊或者浮動視窗。這個元件通常和其他元件一起用於使用者介面的互動和反饋。

Popup元件可以包含任何型別的元件或內容，比如文字、按鈕、輸入框、圖片等等。在開啟和關閉Popup時，可以在程式碼中設定不同的動畫效果來增強使用者體驗。

Popup元件的使用場景有很多，比如彈出確認框、提示框、選單、下拉框等等。在開發移動應用或桌面應用時，Popup元件是非常常見和重要的元件之一。

在HarmonyOS中氣泡分為兩種型別，

  • 一種是系統提供的氣泡PopupOptions：透過配置primaryButton、secondaryButton來設定帶按鈕的氣泡。

  • 一種是開發者可以自定義的氣泡CustomPopupOptions：透過配置builder引數來設定自定義的氣泡。

🔎1.文字提示氣泡

文字提示Popup氣泡是一種在頁面上彈出的提示框，通常用於向使用者展示重要資訊或提示使用者進行操作。它可以顯示文字、圖示和按鈕，並可以自定義樣式和位置。在網站或應用程式中使用文字提示Popup氣泡可以提高使用者體驗和互動性，幫助使用者更好地理解和使用功能。

@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',
        })
    }.width('100%').padding({ top: 5 })
  }
}

image

🔎2.帶按鈕提示氣泡

帶按鈕提示的 Popup 氣泡通常用於提供一些重要的提示資訊以及給使用者提供一些操作選項以及選擇權。帶按鈕的提示氣泡通常包含一個文字訊息和一個或多個按鈕，這些按鈕使使用者能夠執行所需的操作或關閉提示。例如，您可能會看到帶有“是”、“否”、“取消”按鈕的提示氣泡，以便使用者可以選擇執行或取消一項操作。

@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
            }
          },
        })
    }.width('100%').padding({ top: 5 })
  }
}

image

🔎3.自定義氣泡

自定義Popup氣泡是指在設計和開發過程中，根據需求和設計風格，對Popup的樣式、佈局、互動等進行個性化定製的過程。透過自定義Popup氣泡，可以讓頁面更加生動、實用、美觀，提升使用者體驗和品牌形象。

@Entry
@Component
struct Index {
  @State customPopup: boolean = false
  // popup構造器定義彈框內容
  @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, // 氣泡的內容
          placement:Placement.Bottom, // 氣泡的彈出位置
          popupColor:Color.Pink // 氣泡的背景色
        })
    }
    .height('100%')
  }
}

image

🚀寫在最後

  • 如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：
  • 點贊，轉發，有你們的 『點贊和評論』，才是我創造的動力。
  • 關注小編，同時可以期待後續文章ing🚀，不定期分享原創知識。
  • 更多鴻蒙最新技術知識點，請關注作者部落格：https://t.doruo.cn/14DjR1rEY

image

相關文章