ArkTS开发系列之气泡(Popup)和菜单(Menu)学习(2.4)

最新推荐文章于 2025-05-25 19:22:17 发布

jay_chess

最新推荐文章于 2025-05-25 19:22:17 发布

阅读量765

点赞数 14

CC 4.0 BY-SA版权

分类专栏：鸿蒙鸿蒙开发系列学习文章标签：学习鸿蒙 ui

本文链接：https://blog.csdn.net/jay_chess/article/details/139842889

上篇回顾：ArkTS开发系列之基础组件用法的学习(2.3.2下）

本篇内容：对气泡(Popup)和菜单(Menu)学习

一、知识储备

1. 气泡（Popup）

就是绑定在组件上显示的气泡提醒弹窗。
分为两种系统气泡(PopupOptions)和自定义气泡(CustomPopupOptions)。
系统气泡常见设置

 Button('弹窗')
        .onClick(() => {
          this.handlePopup = !this.handlePopup;
        })
        .bindPopup(this.handlePopup, { //绑定气泡，当参数this.handlePopup为true时，显示气泡
          message: '这是个弹窗',
          onStateChange: e => {
            if (!e.isVisible) { //监听气泡的可见状态
              this.handlePopup = false;
            }
          },
          primaryButton: { //设置气泡的按钮
            value: '确定',
            action: () => {
              this.handlePopup = !this.handlePopup;
            }
          },
          secondaryButton: {
            value: '取消',
            action: () => {
              this.handlePopup = !this.handlePopup;
            }
          }
        })

自定义气泡常见设置

 @State isShow: boolean = false;
  @State tips: string = '我是提示';

  @Builder popupBuilder() {
    Row({ space: 2 }) {
      Image($r('app.media.app_icon')).width(20).height(20).margin(5)
      Text(this.tips).fontSize(18)
    }.width(200).height(36).padding(8)
  }

  b