当前位置：首页 > article >正文

【HarmonyNext】显示提示文字的方法

article 2024/11/14 20:53:06

【HarmonyNext】显示提示文字的方法

本文介绍在 HarmonyNext 中显示提示文字的两种常见方法：使用自定义弹窗 CustomDialog 和使用 promptAction 的 showToast 方法。
在这里插入图片描述

一、使用自定义弹窗 `CustomDialog`

在 HarmonyNext 中，自定义弹窗是实现复杂提示信息的一种有效方式。我们可以创建一个自定义的对话框组件，并通过控制器来管理其显示和关闭。以下是一个简单的示例代码，展示如何创建和使用自定义弹窗。

1. 定义自定义对话框组件 `TextDialog`

import {CustomDialogController } from '@ohos.ets';

@CustomDialog
struct TextDialog {
  @Link textValue: string;
  controller: CustomDialogController;

  build() {
    Column() {
      Text(`${this.textValue}`)
        .fontSize(20)
    }.borderRadius(10).padding({ top: 25 })
  }
}

在这段代码中，我们定义了一个 TextDialog 组件，它包含一个文字提示和一些基本的样式设置。

2. 在主组件中使用自定义对话框

import { CustomDialogController } from '@ohos.ets';
import { TextDialog } from './TextDialog'; // 导入自定义对话框组件

@Entry
@Component
export struct ParticipateIn {
  @State textValue: string = '您没有该选项的权限';
  dialogController: CustomDialogController | null = null;

  build() {
    // 初始化对话框控制器
    this.dialogController = new CustomDialogController({
      builder: () => new TextDialog({
        textValue: this.textValue,
        controller: this.dialogController
      })
    });

    // 主界面的构建逻辑
    Column() {
      Button('显示提示')
        .onClick(() => {
          this.textValue = '您没有该选项的权限';
          this.dialogController?.open();
        })
        .margin({ top: 25 })
    }.borderRadius(10).padding({ top: 25 })
  }
}

在 ParticipateIn 组件中，我们初始化了一个 dialogController，并在按钮点击事件中设置提示文字并打开对话框。

二、使用 `promptAction` 的 `showToast` 方法

对于简单的提示信息，HarmonyNext 提供了一个便捷的方法 showToast，它可以在屏幕中央显示一个短暂的提示文字。以下是使用 showToast 的示例代码。

1. 导入 `promptAction`

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

2. 在主组件中使用 `showToast`

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

@Entry
@Component
export struct ParticipateIn {
  @State textValue: string = '您没有该选项的权限';

  build() {
    Column() {
      Button('显示提示')
        .onClick(() => {
          promptAction.showToast({
            message: this.textValue,
            duration: 500,
            alignment: Alignment.Center
          });
        })
        .margin({ top: 25 })
    }.borderRadius(10).padding({ top: 25 })
  }
}