學習筆記（三十）：ArkUi-UIContext.getPromptAction(彈窗)

听着music睡發表於2024-11-09
筆記UIContext

概述：

基於promptAction彈窗演進而來，支援全域性自定義彈窗，不依賴UI元件，依賴UIContext，

支援在非頁面檔案中使用，彈窗內容支援動態修改，支援自定義彈窗圓角半徑、大小和位置，

適合在與頁面解耦的全域性彈窗、自定義彈窗顯示和退出動畫等場景下使用。

注意：

需先使用UIContext中的getPromptAction()方法獲取到PromptAction物件，再透過該物件呼叫對應方法

一、匯入模組

import { PromptAction } from '@kit.ArkUI';

注意這裡匯入的是PromptAction ，而promptAction匯入的是promptAction

promptAction 的匯入：
import { promptAction } from '@kit.ArkUI';

二、定義一個PromptAction

let promptAction:PromptAction = this.uiContext.getPromptAction();

uiContext的定義

import { PromptAction, UIContext } from '@kit.ArkUI';
 
uiContext : UIContext = this.getUIContext()

三、showToast

showToast(options: promptAction.ShowToastOptions): void

建立並顯示文字提示框

1、簡單使用：

// UIContext.getPromptAction使用示例
import { PromptAction, UIContext } from '@kit.ArkUI';

@Entry
@Component
struct UiPromptActionExample {
  @State message: string = 'Hello World';
  uiContext : UIContext = this.getUIContext() 
  // 顯示toast
  showToast(){
    // 獲取PromptAction
    let promptAction:PromptAction = this.uiContext.getPromptAction();
    promptAction.showToast({
      message: '提示內容'
    })
  }
  build() {
    Row() {
      Column() {
        Button('toast')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.showToast()
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

2、ShowToastOptions，文字提示框的選項

1、message，必填

string | Resource型別，顯示的文字資訊

說明：預設字型為'Harmony Sans'，不支援設定其他字型。

2、duration，非必填

number型別，顯示時長（毫秒）

說明：預設值1500ms，取值區間：1500ms-10000ms。若小於1500ms則取預設值，若大於10000ms則取上限值10000ms。

3、bottom，非必填

string | number型別，設定彈窗底部邊框距離導航條的高度

說明：預設值：80vp；ToastShowMode.TOP_MOST模式下，軟鍵盤拉起時，如果bottom值過小，toast要被軟鍵盤遮擋時，會自動避讓至距離軟鍵盤80vp處。ToastShowMode.DEFAULT模式下，軟鍵盤拉起時，會上移軟鍵盤的高度。

4、showMode，非必填

ToastShowMode型別，設定彈窗是否顯示在應用之上。

說明：預設值：ToastShowMode.DEFAULT，預設顯示在應用內。

5、alignment，非必填

Aligment型別，對齊方式。

說明：預設值：undefined，預設底部偏上位置。

6、offset，非必填

Offset型別，在對齊方式上的偏移。

說明：預設值：{dx:0, dy:0}，預設沒有偏移。

7、backgroundColor ，非必填

ResourceColor型別，文字提示框背板顏色

說明：預設值：Color.Transparent；當設定了backgroundColor為非透明色時，backgroundBlurStyle需要設定為BlurStyle.NONE，否則顏色顯示將不符合預期效果。

8、textColor ，非必填

ResourcseColor型別，文字提示框文字顏色

說明：預設值：Color.Black

9、backgroundBlurStyle，非必填

BlurStyle型別，文字提示框背板模糊材質

說明：

預設值：BlurStyle.COMPONENT_ULTRA_THICK

設定為BlurStyle.NONE即可關閉背景虛化。當設定了backgroundBlurStyle為非NONE值時，則不要設定backgroundColor，否則顏色顯示將不符合預期效果。

10、shadow，非必填

ShadowOptions | ShadowStyle 型別，文字提示框背板陰影

說明：預設值：ShadowStyle.OuterDefaultMD

三、showDialog
不常用，參考文件
四、showActionMenu
不常用，參考文件
五、openCustomDialog

建立並彈出dialogContent對應的自定義彈窗，使用Promise非同步回撥。

透過該介面彈出的彈窗內容樣式完全按照dialogContent中設定的樣式顯示，即相當於customdialog設定customStyle為true時的顯示效果。

暫不支援isModal = true與showInSubWindow = true同時使用。

openCustomDialog<T extends Object>(dialogContent: ComponentContent<T>, options?: promptAction.BaseDialogOptions): Promise<void>

使用示例：

// UIContext.getPromptAction使用示例
import { ComponentContent, PromptAction, UIContext } from '@kit.ArkUI';

@Entry
@Component
struct UiPromptActionExample {
  @State message: string = 'Hello World';
  uiContext : UIContext = this.getUIContext()
  // 顯示dialog
  showDialog(){
    // 獲取PromptAction
    let promptAction:PromptAction = this.uiContext.getPromptAction();
    let contentNode = new ComponentContent(this.uiContext,
      wrapBuilder(buildText), new Params(this.message));
    // 開啟彈框
    promptAction.openCustomDialog(contentNode)
  }
  build() {
    Row() {
      Column() {
        Button('openDialog')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.showDialog()
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}
@Builder
function buildText(params: Params) {
  Column() {
    Text(params.text)
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
      .margin({bottom: 36})
  }.backgroundColor('#FFF0F0F0')
}
class Params {
  text: string = ""
  constructor(text: string) {
    this.text = text;
  }
}

六、closeCustomDialog

關閉已彈出的dialogContent對應的自定義彈窗，使用Promise非同步回撥。

closeCustomDialog<T extends Object>(dialogContent: ComponentContent<T>): Promise<void>

使用示例：

// UIContext.getPromptAction使用示例
import { ComponentContent, PromptAction, UIContext } from '@kit.ArkUI';

@Entry
@Component
struct UiPromptActionExample {
  @State message: string = 'Hello World';
  uiContext : UIContext = this.getUIContext()
  // 顯示dialog
  showDialog(){
    // 獲取PromptAction
    let promptAction:PromptAction = this.uiContext.getPromptAction();
    let contentNode = new ComponentContent(this.uiContext,
      wrapBuilder(buildText), new Params(this.message));
    // 開啟彈框
    promptAction.openCustomDialog(contentNode)

    setTimeout(() => {
      promptAction.closeCustomDialog(contentNode);
    }, 2000);     //2秒後自動關閉
  }
  build() {
    Row() {
      Column() {
        Button('openDialog')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.showDialog()
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}
@Builder
function buildText(params: Params) {
  Column() {
    Text(params.text)
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
      .margin({bottom: 36})
  }.backgroundColor('#FFF0F0F0')
}
class Params {
  text: string = ""
  constructor(text: string) {
    this.text = text;
  }
}

七、updateCustomDialog

updateCustomDialog<T extends Object>(dialogContent: ComponentContent<T>, options: promptAction.BaseDialogOptions): Promise<void>

更新已彈出的dialogContent對應的自定義彈窗的樣式

彈窗樣式，目前僅支援更新alignment、offset、autoCancel、maskColor

使用示例：

兩秒夠更新alignment 使彈框居中顯示

// UIContext.getPromptAction使用示例
import { ComponentContent, PromptAction, UIContext } from '@kit.ArkUI';

@Entry
@Component
struct UiPromptActionExample {
  @State message: string = 'Hello World';
  uiContext: UIContext = this.getUIContext()

  // 顯示dialog
  showDialog() {
    // 獲取PromptAction
    let promptAction: PromptAction = this.uiContext.getPromptAction();
    let contentNode = new ComponentContent(this.uiContext,
      wrapBuilder(buildText), new Params(this.message));
    // 開啟彈框
    promptAction.openCustomDialog(contentNode)
    setTimeout(() => {
      promptAction.updateCustomDialog(contentNode,{alignment:DialogAlignment.Center});
    }, 2000); //2秒後自動關閉
  }

  build() {
    Row() {
      Column() {
        Button('openDialog')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.showDialog()
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Builder
function buildText(params: Params) {
  Column() {
    Text(params.text)
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
      .margin({ bottom: 36 })
  }.backgroundColor('#FFF0F0F0')
}

class Params {
  text: string = ""

  constructor(text: string) {
    this.text = text;
  }
}

八、更新彈框內容

setTimeout(() => {
      contentNode.update(new Params("修改內容"))
}, 2000); //2秒後更新元件內容

相關文件：ComponentContent

九、openCustomDialog，closeCustomDialog另一種使用方式

建立並彈出自定義彈窗。使用Promise非同步回撥，返回供closeCustomDialog使用的對話方塊id。暫不支援isModal = true與showInSubWindow = true同時使用。

openCustomDialog(options: promptAction.CustomDialogOptions): Promise<number>

關閉自定義彈窗

closeCustomDialog(dialogId: number): void

使用示例：

import { PromptAction } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  promptAction: PromptAction = this.getUIContext().getPromptAction()
  private customDialogComponentId: number = 0

  @Builder
  customDialogComponent() {
    Column() {
      Text('彈窗').fontSize(30)
      Row({ space: 50 }) {
        Button("確認").onClick(() => {
          this.promptAction.closeCustomDialog(this.customDialogComponentId)
        })
        Button("取消").onClick(() => {
          this.promptAction.closeCustomDialog(this.customDialogComponentId)
        })
      }
    }.height(200).padding(5).justifyContent(FlexAlign.SpaceBetween)
  }

  build() {
    Row() {
      Column() {
        Button("click me")
          .onClick(() => {
            this.promptAction.openCustomDialog({
              builder: () => {
                this.customDialogComponent()
              },
              onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
                console.info("reason" + JSON.stringify(dismissDialogAction.reason))
                console.log("dialog onWillDismiss")
                if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
                  dismissDialogAction.dismiss()
                }
                if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
                  dismissDialogAction.dismiss()
                }
              }
            }).then((dialogId: number) => {
              this.customDialogComponentId = dialogId
            })
          })
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
  }
}

相關文章