鸿蒙应用开发实战-常用组件-提示组件

原创

蓝不蓝编程 2024-10-29 22:52:23 ©著作权

文章标签 typescript 提示框用户交互 文章分类 TypeScript 前端开发

©著作权归作者所有：来自51CTO博客作者蓝不蓝编程的原创作品，请联系作者获取转载授权，否则将追究法律责任

在ArkUI框架中，promptAction模块的showToast和showDialog函数可以与按钮组件结合使用，以提供用户反馈或收集用户输入。以下是如何在按钮点击事件中使用这些函数的示例：

Toast 提示与按钮结合

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

@Entry
@Component
struct Index {
  build() {
    Column() {
      Button('显示Toast')
        .onClick(() => {
          // 显示一个Toast提示框
          promptAction.showToast({
            message: '蓝不蓝编程：操作成功', // 必填项，提示文本内容
            duration: 2000, // Toast显示时长，单位毫秒，默认1500ms
            bottom: '50%' // Toast距离屏幕底部的距离
          });
        });
    }
  }
}

在这个示例中，当用户点击“显示Toast”按钮时，将显示一个Toast提示框，持续时间为2000毫秒。

Dialog 对话框与按钮结合

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

@Entry
@Component
struct Index {
  build() {
    Column() {
      Button('显示Dialog')
        .onClick(() => {
          promptAction.showDialog({
            title: '蓝不蓝编程：对话框标题',
            message: '这是一个Dialog对话框，你可以选择一个选项',
            buttons: [
              {
                text: '取消', // 按钮文字
                color: '#000000' // 按钮颜色
              },
              {
                text: '确定', // 按钮文字
                color: '#000000' // 按钮颜色
              }
            ]
          }).then(data => {
            console.info('点击按钮索引：', data.index);
          });
        });
    }
  }
}