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

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

🚀一、CustomDialog

CustomDialog元件是一種自定義對話方塊，可以透過開發人員根據特定的要求定製內容和佈局。它允許開發人員建立一個完全可定製的對話方塊，可以顯示任何型別的內容，例如文字、影像、表單和按鈕。

CustomDialog通常用於在執行任務之前向使用者提供額外的資訊或輸入選項，例如確認刪除操作或輸入登入憑據。它們還可以用於建立彈出視窗來顯示資訊或廣告。

CustomDialog通常涉及建立一個新的佈局檔案，並擴充套件Dialog類來自定義其行為和外觀。

🔎1.建立自定義彈窗

HarmonyOS的@CustomDialog是一個自定義對話方塊控制元件，它可以幫助開發人員快速建立各種各樣的對話方塊，包括提示框、確認框、輸入框等。

使用@CustomDialog，開發人員可以自定義對話方塊的標題、訊息、按鈕、圖示等屬性，以及對話方塊的樣式和佈局。此外，它還支援自定義對話方塊的背景、動畫和觸發事件等屬性，以滿足不同場景的需求。

@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController
  build() {
    Column() {
      Text('我是內容')
        .fontSize(20)
        .margin({ top: 10, bottom: 10 })
    }
  }
}

@Entry
@Component
struct TextInputSample {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({}),
  })
  build() {
    Column() {
      Flex({justifyContent:FlexAlign.Center}){
        Button('click me')
          .onClick(() => {
            this.dialogController.open()
          })
      }.width('100%')
    }.padding(20)
  }
}

image

🔎2.彈窗的互動

彈窗資料互動的作用包括提高使用者體驗、簡化流程、提高互動性、實現資料互動和最佳化UI設計等。它可以在使用者操作過程中快速展示資訊或選項，減少操作繁瑣度和時間成本；同時作為資料互動的橋樑，傳遞使用者輸入或選擇的資訊進行處理，展示需要的資訊給使用者。彈窗資料互動可以提供靈活的互動形式，同時也可以透過多樣化的UI設計形式實現獨特的設計效果。

@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController
  cancel: () => void
  confirm: () => void
  build() {
    Column() {
      Text('我是內容').fontSize(20).margin({ top: 10, bottom: 10 })
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('cancel')
          .onClick(() => {
            this.controller.close()
            this.cancel()
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        Button('confirm')
          .onClick(() => {
            this.controller.close()
            this.confirm()
          }).backgroundColor(0xffffff).fontColor(Color.Red)
      }.margin({ bottom: 10 })
    }
  }
}

@Entry
@Component
struct TextInputSample {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({
      cancel: this.onCancel,
      confirm: this.onAccept,
    }),
    alignment: DialogAlignment.Default,  // 可設定dialog的對齊方式，設定顯示在底部或中間等，預設為底部顯示
  })
  onCancel() {
    console.info('Callback when the first button is clicked')
  }
  onAccept() {
    console.info('Callback when the second button is clicked')
  }
  build() {
    Column() {
      Flex({justifyContent:FlexAlign.Center}){
        Button('click me')
          .onClick(() => {
            this.dialogController.open()
          })
      }.width('100%')
    }.padding(20)
  }
}

image

🔎3.案例

// xxx.ets
@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController
  cancel: () => void
  confirm: () => void
  build() {
    Column() {
      Text('我是彈窗案例').fontSize(20).margin({ top: 10, bottom: 10 })
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('取消')
          .onClick(() => {
            this.controller.close()
            this.cancel()
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        Button('確認')
          .onClick(() => {
            this.controller.close()
            this.confirm()
          }).backgroundColor(0xffffff).fontColor(Color.Red)
      }.margin({ bottom: 10 })
    }
  }
}

@Entry
@Component
struct DialogExample {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({
      cancel: this.onCancel,
      confirm: this.onAccept,
    }),
    alignment: DialogAlignment.Default,  // 可設定dialog的對齊方式，設定顯示在底部或中間等，預設為底部顯示
  })
  onCancel() {
    console.info('取消')
  }
  onAccept() {
    console.info('確認')
  }

  build() {
    Flex({ justifyContent: FlexAlign.Center }) {
      Button('點我')
        .onClick(() => {
          this.dialogController.open()
        })
    }.width('100%')
  }
}

image

🚀寫在最後

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

image

相關文章