HarmonyOS开发 弹窗组件

于 2024-06-24 21:21:11 发布
阅读量775 收藏 8
点赞数 23
分类专栏： HarmonyOS 文章标签： harmonyos
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36158551/article/details/139938014
版权

1.HarmonyOS开发 弹窗组件

  弹窗是移动应用中常见的一种用户界面元素，常用于显示一些重要的信息、提示用户进行操作或收集用户输入。ArkTS提供了多种内置的弹窗供开发者使用，除此之外还支持自定义弹窗，来满足各种不同的需求。
在这里插入图片描述

1.1. 示例

1.1.1. 消息提示

  Toast（消息提示），常用于显示一些简短的消息或提示，一般会在短暂停留后自动消失。具体效果如下
在这里插入图片描述

  showToast()方法的参数定义如下

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

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

  private toastClick() {
    promptAction.showToast({
      message: '吐司',
      duration: 2000,
      bottom: 50
    });
  }

1.1.2. 警告对话框

  AlertDialog（警告对话框）用于向用户发出警告或确认操作的提示，确保用户在敏感操作前进行确认。具体效果如下
在这里插入图片描述

 /**
   * 警告对话框
   */
  private alertClick() {
    AlertDialog.show(
      {
        title: '删除该记录？', //弹窗标题
        message: '删除后无法恢复，您确认要删除吗？', //弹窗信息
        autoCancel: true, //点击遮障层时，是否关闭弹窗
        alignment: DialogAlignment.Center, //弹窗位置
        offset: { dx: 0, dy: -20 }, //相对于弹窗位置的偏移量
        primaryButton: { //主要按钮，位于左侧
          value: '确认', //按钮内容
          fontColor: Color.Red, //字体颜色
          action: () => { //点击回调
            console.log('确认删除')
          }
        },
        secondaryButton: { //次要按钮，位于右侧
          value: '取消',
          action: () => {
            console.log('取消删除')
          }
        },
        cancel: () => { //点击遮罩层取消时的回调
          console.info('Closed callbacks')
        }
      }
    )
  }

1.1.3. 操作列表弹框

  ActionSheet（操作列表弹窗）用于提供一组选项给用户选择，用户从中选择后，可执行相应的操作。具体效果如下
在这里插入图片描述
  可使用全局方法ActionSheet.show()显示操作列表弹窗

  /**
   * 操作弹窗
   */
  private operaClick() {
    ActionSheet.show({
      title: '文件操作', //弹窗标题
      message: '请选择你要对该文件执行的操作', //弹窗内容
      autoCancel: true, //点击遮障层时，是否关闭弹窗
      alignment: DialogAlignment.Center, //弹窗位置
      offset: { dx: 0, dy: -20 }, //弹窗相对alignment位置的偏移量
      confirm: { //底部按钮
        value: '取消', //按钮文本内容
        action: () => { //按钮回调函数
          console.log('点击按钮取消')
        }
      },
      // cancel: () => { //点击遮障层关闭弹窗时的回调
      //   console.log('点击遮障层取消')
      // },
      sheets: [ //操作选项列表
        {
          icon: $r('app.media.icon_my_config'), //图标
          title: '复制', //文本
          action: () => { //回调
            console.log('复制文件')
          }
        },
        {
          icon: $r('app.media.icon_my_config'),
          title: '剪切',
          action: () => {
            console.log('剪切文件')
          }
        },
        {
          icon: $r('app.media.icon_my_config'),
          title: '删除',
          action: () => {
            console.log('删除文件')
          }
        }
      ]
    })
  }

1.1.4. 选择器弹窗

  选择器弹窗用于让用户从一个列表中选择一个具体的值。ArkTS内置了多种选择器弹窗，例如文本选择器、日期选择器、时间选择器等等，各选择器效果如下
  TextPickerDialog（文本滑动选择器弹窗）
在这里插入图片描述

  // 是否显示加载框
  private isShowLoadingDialog = true
  fruits: string[] = ['苹果', '橘子', '香蕉', '鸭梨', '西瓜']


  /**
   * 选择器弹窗
   */
  private selectClick() {
    TextPickerDialog.show({
      range: this.fruits, //设置文本选择器的选择范围
      selected: this.selectedIndex, //设置选中的索引
      onAccept: (value: TextPickerResult) => {
        //确定按钮的回调函数
        // this.selectedIndex = value.index;
      },
      onCancel: () => { //取消按钮的回调函数
        console.info('取消选择')
      },
      onChange: (value: TextPickerResult) => { //选择器选中内容发生变化时触发的回调函数
        console.info(`当前文本:${JSON.stringify(value)}`)
      }
    })
  }

1.1.5. 日期滑动选择弹窗

  DatePickerDialog
在这里插入图片描述

  @State date: Date = new Date("2010-1-1");

  /**
   * 选择器日期弹窗
   */
  private datePickerClick() {
    DatePickerDialog.show({
      start: new Date("2000-1-1"), //设置选择器的其实日期
      end: new Date("2100-12-31"), //设置选择器的结束日期
      selected: this.date, //设置当前选中的日期
      onAccept: (value: DatePickerResult) => { //确定按钮的回调
        this.date.setFullYear(value.year, value.month, value.day)
      },
      onCancel: () => { //取消按钮的回调
        console.info('取消选择')
      },
      onChange: (value: DatePickerResult) => { //选择器当前内容发生变化时触发的回调函数
        console.info(`当前日期:${JSON.stringify(value)}`)
      }
    })
  }

1.1.6. 时间滑动选择期弹窗

  TimePickerDialog
在这里插入图片描述

@State time: Date = new Date('2020-01-01T00:00:00')

  /**
   * 选择器时间弹窗
   */
  private timePickerClick() {
    TimePickerDialog.show({
      selected: this.time, //设置当前选中的时间
      useMilitaryTime: true, //是否使用24小时制
      onAccept: (value: TimePickerResult) => { //确认按钮的回调
        this.time.setHours(value.hour, value.minute);
      },
      onCancel: () => { //取消按钮的回调
        console.info('取消选择')
      },
      onChange: (value: TimePickerResult) => { //选择器当前内容发生变化时触发的回调函数
        console.info(`当前时间:${JSON.stringify(value)}`)
      }
    })
  }

1.1.7. 自定义弹窗

#### 1.1.7. 自定义弹窗

  当现有组件不满足要求时，可考虑自定义弹窗，自定义弹窗允许开发者自定义弹窗内容和样式。例如

@CustomDialog
struct TextInputDialog {
  controller: CustomDialogController =
    new CustomDialogController(
      { builder: TextInputDialog() })
  // confirm: (value: string) => void;
  value: string = '';

  build() {
    Column({ space: 20 }) {
      Text('请输入你的答案')
      TextInput({ placeholder: '请输入数字' })
        .type(InputType.Number)
        .onChange((value) => {
          this.value = value;
        })
      Row({ space: 50 }) {
        Button('取消')
          .onClick(() => {
            this.controller.close();
          })
        Button('确认').onClick(() => {
          // this.confirm(this.value);
          this.controller.close();
        })
      }
    }.padding(20)
  }
}

  @State answer: string = '?'
  controller: CustomDialogController = 
    new CustomDialogController({
    builder: TextInputDialog({
      // confirm: (value) => {
      //   this.answer = value;
      // }
    }),
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -30 }
  })


  /**
   * 自定义弹窗
   */
  private customDialogClick() {
    this.controller.open();
  }

1.2. 完整代码

import { promptAction, router } from '@kit.ArkUI'
import { TitleBar } from '../../components/common/TitleBar'
import { RouterParams } from '../../helper/RouterHelper'
import { LoadingDialog } from '../../components/dialog/LoadingDialog'

@Extend(Button)
function buttonItem() {
.stateEffect(true)
.type(ButtonType.Normal)
.borderRadius(8)
.fontSize(17)
.backgroundColor($r('app.color.primary_green'))
.padding({
  top: 8,
  bottom: 8,
  left: 70,
  right: 70
})
.margin({
  top: 8,
  bottom: 8
})
}

@Entry
@Component
struct ToastPage {
@State pageTitle: string = "弹出框"
// 加载框
private loadingDialog: CustomDialogController = new
CustomDialogController({
  builder: LoadingDialog(),
  customStyle: true
})
// 是否显示加载框
private isShowLoadingDialog = true
fruits: string[] = ['苹果', '橘子', '香蕉', '鸭梨', '西瓜']
@State date: Date = new Date("2010-1-1");
@State time: Date = new Date('2020-01-01T00:00:00')
@State selectedIndex: number = 0
@State answer: string = '?'
controller: CustomDialogController =
  new CustomDialogController({
  builder: TextInputDialog({
    // confirm: (value) => {
    //   this.answer = value;
    // }
  }),
  alignment: DialogAlignment.Bottom,
  offset: { dx: 0, dy: -30 }
})
aboutToAppear() {
  try {
    this.pageTitle = (router
      .getParams() as RouterParams).title
  } catch (e) {
  }
}

/**
 * Toast（消息提示），常用于显示一些简短的消息或提示，
 * 一般会在短暂停留后自动消失。
 *showToast(options: { message: string |
 * Resource,duration?: number,bottom?: string | number})
 * message属性用于设置提示信息
 *duration属性用于设置提示信息停留时长，单位为毫秒，取值范围是[1500,10000]
 *bottom属性用于设置提示信息到底部的距离
 */
private toastClick() {
  promptAction.showToast({
    message: '吐司',
    duration: 2000,
    bottom: 50
  });
}

/**
 * 弹窗
 */
private popClick() {
  AlertDialog.show(
    {
      title: '标题',
      message: '内容',
      autoCancel: true,//点击外侧是否关闭
      alignment: DialogAlignment.Center,
      offset: { dx: 0, dy: -20 },
      gridCount: 3,
      confirm: {
        value: '确定',
        action: () => {
          console.info('==ewcallback')
        }
      },
      cancel: () => {
        console.info('==ewClosed callbacks')
      }
    }
  )
}
/**
 * 弹窗2
 */
private pop2Click() {
  AlertDialog.show(
    {
      title: '标题',
      message: '内容',
      autoCancel: true,//点击外侧是否关闭
      alignment: DialogAlignment.Center,
      gridCount: 4,
      offset: { dx: 0, dy: -20 },
      primaryButton: {
        value: '取消',
        action: () => {
          console.info('==ew==取消')
        }
      },
      secondaryButton: {
        value: '确定',
        action: () => {
          console.info('==ew==确定')
        }
      },
      cancel: () => {
        console.info('==ew==点击外侧关闭')
      }
    }
  )
}
/**
 * 操作弹窗
 */
private operaClick() {
  ActionSheet.show({
    title: '文件操作', //弹窗标题
    message: '请选择你要对该文件执行的操作', //弹窗内容
    autoCancel: true, //点击遮障层时，是否关闭弹窗
    alignment: DialogAlignment.Center, //弹窗位置
    offset: { dx: 0, dy: -20 }, //弹窗相对alignment位置的偏移量
    confirm: { //底部按钮
      value: '取消', //按钮文本内容
      action: () => { //按钮回调函数
        console.log('点击按钮取消')
      }
    },
    // cancel: () => { //点击遮障层关闭弹窗时的回调
    //   console.log('点击遮障层取消')
    // },
    sheets: [ //操作选项列表
      {
        icon: $r('app.media.icon_my_config'), //图标
        title: '复制', //文本
        action: () => { //回调
          console.log('复制文件')
        }
      },
      {
        icon: $r('app.media.icon_my_config'),
        title: '剪切',
        action: () => {
          console.log('剪切文件')
        }
      },
      {
        icon: $r('app.media.icon_my_config'),
        title: '删除',
        action: () => {
          console.log('删除文件')
        }
      }
    ]
  })
}
/**
 * 加载弹窗
 */
private loadingClick() {
  if (this.isShowLoadingDialog) {
    // 显示加载框
    this.loadingDialog.open()
  } else {
    // 关闭加载框
    this.loadingDialog.close()
  }
  this.isShowLoadingDialog = !this.isShowLoadingDialog
}


/**
 * 选择器弹窗
 */
private selectClick() {
  TextPickerDialog.show({
    range: this.fruits, //设置文本选择器的选择范围
    selected: this.selectedIndex, //设置选中的索引
    onAccept: (value: TextPickerResult) => {
      //确定按钮的回调函数
      // this.selectedIndex = value.index;
    },
    onCancel: () => { //取消按钮的回调函数
      console.info('取消选择')
    },
    onChange: (value: TextPickerResult) => { //选择器选中内容发生变化时触发的回调函数
      console.info(`当前文本:${JSON.stringify(value)}`)
    }
  })
}
/**
 * 选择器日期弹窗
 */
private datePickerClick() {
  DatePickerDialog.show({
    start: new Date("2000-1-1"), //设置选择器的其实日期
    end: new Date("2100-12-31"), //设置选择器的结束日期
    selected: this.date, //设置当前选中的日期
    onAccept: (value: DatePickerResult) => { //确定按钮的回调
      this.date.setFullYear(value.year, value.month, value.day)
    },
    onCancel: () => { //取消按钮的回调
      console.info('取消选择')
    },
    onChange: (value: DatePickerResult) => { //选择器当前内容发生变化时触发的回调函数
      console.info(`当前日期:${JSON.stringify(value)}`)
    }
  })
}
/**
 * 选择器时间弹窗
 */
private timePickerClick() {
  TimePickerDialog.show({
    selected: this.time, //设置当前选中的时间
    useMilitaryTime: true, //是否使用24小时制
    onAccept: (value: TimePickerResult) => { //确认按钮的回调
      this.time.setHours(value.hour, value.minute);
    },
    onCancel: () => { //取消按钮的回调
      console.info('取消选择')
    },
    onChange: (value: TimePickerResult) => { //选择器当前内容发生变化时触发的回调函数
      console.info(`当前时间:${JSON.stringify(value)}`)
    }
  })
}
/**
 * 自定义弹窗
 */
private customDialogClick() {
  this.controller.open();
}


/**
 * 警告对话框
 */
private alertClick() {
  AlertDialog.show(
    {
      title: '删除该记录？', //弹窗标题
      message: '删除后无法恢复，您确认要删除吗？', //弹窗信息
      autoCancel: true, //点击遮障层时，是否关闭弹窗
      alignment: DialogAlignment.Center, //弹窗位置
      offset: { dx: 0, dy: -20 }, //相对于弹窗位置的偏移量
      primaryButton: { //主要按钮，位于左侧
        value: '确认', //按钮内容
        fontColor: Color.Red, //字体颜色
        action: () => { //点击回调
          console.log('确认删除')
        }
      },
      secondaryButton: { //次要按钮，位于右侧
        value: '取消',
        action: () => {
          console.log('取消删除')
        }
      },
      cancel: () => { //点击遮罩层取消时的回调
        console.info('Closed callbacks')
      }
    }
  )
}

build() {
  Column() {
    TitleBar({ pageTitle: $pageTitle })
    Button('吐司')
      .buttonItem()
      .onClick(this.toastClick)
    Button('弹窗')
      .buttonItem()
      .onClick(this.popClick)
    Button('弹窗2')
      .buttonItem()
      .onClick(this.pop2Click)
    Button('加载弹窗')
      .buttonItem()
      .onClick(() => this.loadingClick())
    Button('警告对话框')
      .buttonItem()
      .onClick(() => this.alertClick())
    Button('操作对话框')
      .buttonItem()
      .onClick(() => this.operaClick())
    Button('选择器弹窗')
      .buttonItem()
      .onClick(() => this.selectClick())
    Button('选择器日期弹窗')
      .buttonItem()
      .onClick(() => this.timePickerClick())
    Button('选择器时间弹窗')
      .buttonItem()
      .onClick(() => this.timePickerClick())
    Button('自定义弹窗')
      .buttonItem()
      .onClick(() => this.customDialogClick())



  }
  .width('100%')
  .height('100%')
  .alignItems(HorizontalAlign.Center)
}
}



@CustomDialog
struct TextInputDialog {
controller: CustomDialogController =
  new CustomDialogController(
    { builder: TextInputDialog() })
// confirm: (value: string) => void;
value: string = '';

build() {
  Column({ space: 20 }) {
    Text('请输入你的答案')
    TextInput({ placeholder: '请输入数字' })
      .type(InputType.Number)
      .onChange((value) => {
        this.value = value;
      })
    Row({ space: 50 }) {
      Button('取消')
        .onClick(() => {
          this.controller.close();
        })
      Button('确认').onClick(() => {
        // this.confirm(this.value);
        this.controller.close();
      })
    }
  }.padding(20)
}
}
雪芽蓝域zzs
关注
  • 23
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
鸿蒙开发实战项目(三十六):弹窗基本使用（JS）
sybh的博客
01-27 1012
本篇Codelab主要基于dialog和button组件，实现弹窗的几种自定义效果，具体效果有：警告弹窗，点击确认按钮弹窗关闭。确认弹窗，点击取消按钮或确认按钮，触发对应操作。加载弹窗，展示加载中效果。提示弹窗，支持用户输入内容，点击取消和确认按钮，触发对应操作。进度条弹窗，展示进度条以及百分比。
HCIA-HarmonyOS应用开发工程师 V2.0 模拟考试
10-13
这个初级认证主要涉及HarmonyOS的基础架构、组件使用、页面跳转、权限管理、应用结构以及开发工具的使用。 1. 页面跳转分为页面内跳转和页面间跳转。页面内跳转发生在同一个Ability内部，可以通过Router或...
构建多种样式的弹窗（案例）
一起学鸿蒙呀~~
01-08 1151
点击兴趣爱好选项，通过customDialogController.open方法弹出自定义弹窗，根据需要选择相应的兴趣爱好，效果如图所示：在view目录下，点击鼠标右键 > New > ArkTS File，新建一个ArkTS文件，然后命名为CustomDialogWidget子组件。在CustomDialogWidget的aboutToAppear方法，通过manager.getStringArrayValue方法获取本地资源数据进行初始化。...return;if (!
HarmonyOS应用开发-eTS-警告弹窗
douluo998的博客
02-02 275
显示警告弹窗组件，可设置文本内容与响应回调。
HarmonyOS应用开发-基础组件，弹窗原来是这样实现的。
wmd看海的博客
03-13 513
自定义MyCustomDialog实现自定义弹框在MyCustomDialog上设置@CustomDialog在MyCustomDialog中设置弹窗中要显示的内容，设置Button事件在MyCustomDialog中设置变量CustomDialogController在页面中使用MyCustomDialog，设置CustomDialogControllerbuild() {Column() {Row() {Button('取消')})Button('确定')})
HarmonyOS开发18：弹窗组件
GeniusAng的博客
07-29 554
两种弹框： CommonDialog： ToastDialog：
【鸿蒙 HarmonyOS NEXT】@ohos.promptAction (弹窗)
weixin_71403100的博客
04-06 2636
创建并显示文本提示框、对话框和操作菜单。
HarmonyOS开发案例：抽奖转盘
最新发布
07-27
基于画布组件、动画样式，实现的一个自定义抽奖圆形转盘。包含如下功能： 通过画布组件canvas，画出抽奖圆形转盘。 通过动画样式设置动画，实现抽奖功能。 通过自定义弹窗dialog弹出抽中的奖品。基于画布组件、动画...
HarmonyOS应用开发-XPopup常用的弹窗体验.docx
05-21
综上所述，XPopup 作为一款面向 HarmonyOS 的弹窗组件，不仅提供了丰富的内置样式和动画效果，还具备高度的自定义能力和强大的兼容性，是提升应用用户体验不可或缺的工具之一。对于正在开发 HarmonyOS 应用的开发者...
HarmonyOS应用开发者基础认证考试题目及答案
11-19
HarmonyOS 应用开发者基础认证考试涵盖了HarmonyOS应用开发的核心知识，包括数据存储、组件使用、生命周期管理、网络请求以及界面布局等多个方面。以下是这些知识点的详细解释： 1. **首选项Preferences**：...
鸿蒙HarmonyOS应用开发者认证 题库+答案案
01-18
本资源提供了鸿蒙HarmonyOS应用开发者认证的题库和答案，涵盖了HarmonyOS应用开发的多个方面，包括容器组件、 Ability、Web组件、网络请求、首选项、自定义组件、弹窗组件、图片加载、网络权限等。通过学习和理解...
【HarmonyOS开发】ArkUI中的自定义弹窗
qq_23334071的博客
12-18 872
自定义弹窗的使用更加灵活，适用于更多的业务场景，在自定义弹窗中您可以自定义弹窗内容，构建更加丰富的弹窗界面。
【鸿蒙HarmonyOS开发笔记】常用组件介绍篇 —— 弹窗组件
温的打怪之旅
03-17 3660
Toast（消息提示），常用于显示一些简短的消息或提示，一般会在短暂停留后自动消失。具体效果如下（警告对话框）用于向用户发出警告或确认操作的提示，确保用户在敏感操作前进行确认。具体效果如下可使用全局方法显示警告对话框，具体用法可参考相关案例或者官方文档。下面给出一个案例@Entry@Componentbuild() {Column() {Button('删除')title: '删除该记录？', //弹窗标题message: '删除后无法恢复，您确认要删除吗？', //弹窗信息。
harmonyOS鸿蒙官网教程-添加弹窗
移动端开发与最新技术
10-08 3297
在我们日常使用应用的时候，可能会进行一些敏感的操作，比如删除联系人，这时候我们给应用添加弹窗来提示用户是否需要执行该操作。
HarmonyOS实战开发-如何构建多种样式弹窗
m0_70749039的博客
03-29 1143
本篇Codelab将介绍如何使用弹窗功能，实现四种类型弹窗。分别是：警告弹窗、自定义弹窗、日期滑动选择器弹窗、文本滑动选择器弹窗。需要完成以下功能：
在HarmonyOS中弹出Toast的方案
qq_14863717的博客
05-11 438
通过以上步骤，你可以在HarmonyOS应用中弹出一个Toast消息提示框。在实际使用时，请根据需要调整消息内容和显示时长。（可选，表示Toast显示的时长，默认值为2000毫秒）。方法来显示Toast。（必选，表示要显示的消息内容）和。
HarmonyOS实战开发-实现自定义弹窗
2401_82546228的博客
03-28 1263
本篇Codelab基于ArkTS的声明式开发范式实现了三种不同的弹窗，第一种直接使用公共组件，后两种使用CustomDialogController实现自定义弹窗，效果如图所示
鸿蒙系统吐司toast消息提示ToastDialog
无极低码
06-13 1562
ToastDialog toastDialog = new ToastDialog(this); toastDialog.setText("提示信息").setGravity(1).setDuration(2000).show();
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值