鸿蒙开发笔记(二十一): 气泡提示 Popup, 菜单 Menu

最新推荐文章于 2025-04-03 18:54:39 发布

ZWaruler

最新推荐文章于 2025-04-03 18:54:39 发布

阅读量1.5k

点赞数 5

分类专栏：鸿蒙开发文章标签： harmonyos 鸿蒙开发移动开发

本文链接：https://blog.csdn.net/u010483016/article/details/135704788

版权

本文详细介绍了Flutter中的气泡提示（Popup）功能，包括系统提供的PopupOptions和自定义的CustomPopupOptions，以及如何通过bindPopup在Button上实现文本提示和带按钮的交互。同时，文章还涵盖了菜单组件（Menu）的使用，如bindMenu和bindContextMenu方法，以及MenuItem和MenuItemGroup的结构和配置。

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

1. 气泡提示 Popup

Popup属性可绑定在组件上显示气泡弹窗提示，设置弹窗内容、交互逻辑和显示状态。主要用于屏幕录制、信息弹出提醒等显示状态。

气泡分为两种类型，一种是系统提供的气泡PopupOptions，一种是开发者可以自定义的气泡CustomPopupOptions。其中PopupOptions为系统提供的气泡，通过配置primaryButton、secondaryButton来设置带按钮的气泡。CustomPopupOptions通过配置builder参数来设置自定义的气泡。

1.1 文本提示气泡

文本提示气泡常用于只展示带有文本的信息提示，不带有任何交互的场景。Popup属性需绑定组件，当bindPopup属性中参数show为true的时候会弹出气泡提示。

在Button组件上绑定Popup属性，每次点击Button按钮，handlePopup会切换布尔值，当其为true时，触发bindPopup弹出气泡。

@Entry
@Component
struct PopupExample {
   
  @State handlePopup: boolean = false
 
  build() {
   
    Column() {
   
      Button('PopupOptions')
        .onClick(() => {
   
          this.handlePopup = !this.handlePopup
        })
        .bindPopup(this.handlePopup, {
   
          message: 'This is a popup with PopupOptions',
        })
    }.width('100%').padding({
    top: 5 })
  }
}

1.2 带按钮的提示气泡

通过primaryButton、secondaryButton属性为气泡最多设置两个Button按钮，通过此按钮进行简单的交互；开发者可以通过配置action参数来设置想要触发的操作。

@Entry
@Component
struct PopupExample22 {
   
  @State handlePopup: boolean = false
  build() {
   
    Column() {
   
      Button('PopupOptions').margin({
   top:200})
        .onClick(() => {
   
          this.handlePopup = !this.handlePopup
        })
        .bindPopup(this.handlePopup, {
   
          message: 'This is a popup with PopupOptions',
          primaryButton:{
   
            value:'Confirm',
            action: () => {
   
              this.handlePopup = !this.handlePopup
              console.info('confirm Button click')
            }
          },
          secondaryButton: {
   
            value: 'Cancel',
            action: () => {
   
              this.handlePopup = !this.handlePopup
            }
          },
        })
    }.width('100%').padding({
    top: 5 })
  }
}

1.3 自定义气泡

开发者可以使用构建器CustomPopupOptions创建自定义气泡，@Builder中可以放自定义的内容。除此之外，还可以通过popupColor等参数控制气泡样式。

@Entry
@Component
struct Index {
   
  @State customPopup: boolean = false
  // popup构造器定义弹框内容
  @Builder popupBuilder() {
   
    Row({
     space: 2 }) {
   
      Image($r("app.media.icon")).width(24).height(24).margin({
    left: 5

最低0.47元/天解锁文章