HarmonyOS系统开发ArkTS常用组件弹窗及参数（十）

爱吃面的猫

已于 2024-10-31 13:59:29 修改

阅读量5k

点赞数 6

分类专栏：华为鸿蒙文章标签： harmonyos 华为

于 2024-03-20 12:04:51 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41946216/article/details/136872330

版权

本文详细介绍了在ArkTS中使用内置和自定义弹窗的功能，包括消息提示、警告对话框、操作列表、选择器（如文本、日期和时间）以及如何自定义弹窗内容和样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

弹窗是移动应用中常见的一种用户界面元素，常用于显示一些重要的信息、提示用户进行操作或收集用户输入。ArkTS提供了多种内置的弹窗供开发者使用，如消息提示、警告对话框、选择器弹窗、操作列表弹窗，除此之外还支持自定义弹窗，来满足各种不同的需求。

消息提示
警告对话框
操作列表弹窗
选择器弹窗
自定义弹窗

1、消息提示

Toast（消息提示）组件，常用于显示一些简短的消息或提示，一般会在短暂停留后自动消失。

使用需要通过 @ohos.promptAction模块中的showToast()，方法显示 Toast 提示，使用时需要先导入@ohos.promptAction模块。

showToast(options: { message: string | Resource,duration?: number,bottom?: string | number})

message：message属性用于设置提示信息
duration：duration属性用于设置提示信息停留时长，单位为毫秒，取值范围是[1500,10000]
bottom：bottom属性用于设置提示信息到底部的距离

import promptAction from '@ohos.promptAction'

@Entry
@Component
struct textInput {
  @State message: string = '';

  build() {
    Column({ space: 10 }) {
      TextInput({ 'placeholder': '请输入账号', 'text': '' })
        .onChange((newText) => {
          this.message = newText
        })
        .placeholderFont({ weight: '800' })
        .width(200)
        .height(50)
        .backgroundColor(Color.Gray)
      Button('提交')
        .fontSize(25)
        .onClick(() => {
          console.log(this.message.length + '')
          if (this.message.length<5) {
             promptAction.showToast({
               message:'您的账号有误',
               duration:1600,
               bottom:150
             })
          }
        })
    }
    .width('100%')
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

2、警告对话框

AlertDialog（警告对话框）用于向用户发出警告或确认操作的提示，确保用户在敏感操作前进行确认。AlertDialog.show()调用。


@Entry
@Component
struct textInput {
  build() {
    Column({ space: 10 }) {
      Row({ space: 10 }) {
        Text("一本正经").fontSize(30)
        Text("32套").fontSi

最低0.47元/天解锁文章