当前位置: 首页 > article >正文

HarmonyOS Next 弹窗系列教程(4)

HarmonyOS Next 弹窗系列教程(4)

介绍

本章主要介绍和用户点击关联更加密切的菜单控制(Menu)气泡提示(Popup)

它们出现显示弹窗出现的位置都是在用户点击屏幕的位置相关

菜单控制(Menu)

Menu 是菜单接口,一般用于鼠标右键弹窗、点击弹窗等。具体用法请参考菜单控制。

使用bindContextMenu并设置预览图,菜单弹出时有蒙层,此时为模态。

使用bindMenu或 bindContextMenu 未设置预览图时,菜单弹出无蒙层,此时为非模态。

基本用法

在按钮或者元素上调用bindMenu,并且传入菜单内容即可

PixPin_2024-12-27_08-56-40

@Entry
@Component
struct Index {build() {Column() {Button('click for Menu').bindMenu([{value: 'Menu1',action: () => {console.info('handle Menu1 select')}}])}.width('100%').margin({ top: 5 })}
}

自定义菜单内容

如果想要个性化的自定义弹出的菜单内容,按照以下步骤进行即可

  1. 使用@Builder 自定义要显示的内容

      // 子菜单@BuilderSubMenu() {Menu() {MenuItem({ content: "复制", labelInfo: "Ctrl+C" })MenuItem({ content: "粘贴", labelInfo: "Ctrl+V" })}}// 主菜单@BuilderMyMenu() {Menu() {MenuItem({ startIcon: $r("app.media.foreground"), content: "菜单选项" })MenuItem({ startIcon: $r("app.media.layered_image"), content: "菜单选项" }).enabled(false)MenuItemGroup({ header: '小标题' }) {MenuItem({ content: "菜单选项", builder: this.SubMenu })}}}
  2. 使用 bindMenu 绑定显示的内容

    Button("click for Menu").bindMenu(this.MyMenu);
    

效果

PixPin_2024-12-27_09-04-29

右键或长按菜单

Menu 还支持创建右键/长按菜单

  1. 使用bindContextMenu来绑定菜单
  2. 传入 ResponseType.RightClick 表示右键
  3. 传入 ResponseType.LongPress 表示长按
Button("click for Menu").bindContextMenu(this.MyMenu, ResponseType.LongPress);

PixPin_2024-12-27_09-09-34

气泡提示(Popup)

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

气泡分为两种类型,一种是系统提供的气泡PopupOptions,一种是开发者可以自定义的气泡CustomPopupOptions。

基本用法

  1. 通过一个布尔值来设置汽贸的显示和隐藏
  2. 通过 message 属性设置气泡的内容

PixPin_2024-12-27_09-22-38

@Entry
@Component
struct PopupExample {// 控制气泡显示隐藏@State handlePopup: boolean = falsebuild() {Column() {Button('PopupOptions').onClick(() => {this.handlePopup = !this.handlePopup}).bindPopup(this.handlePopup, {message: 'This is a popup with PopupOptions',})}.width('100%').padding({ top: 5 })}
}

监听气泡的显示隐藏状态

通过 onStateChange 参数为气泡添加状态变化的事件回调,可以判断当前气泡的显示状态。

@Entry
@Component
struct PopupExample {@State handlePopup: boolean = falsebuild() {Column() {Button('PopupOptions').onClick(() => {this.handlePopup = !this.handlePopup}).bindPopup(this.handlePopup, {message: 'This is a popup with PopupOptions',onStateChange: (e)=> { // 返回当前的气泡状态if (!e.isVisible) {this.handlePopup = false}}})}.width('100%').padding({ top: 5 })}
}

自定义气泡内容

我们可以通**@Builder自定义要显示的气泡的内容,然后通过builder**属性进行调用

PixPin_2024-12-27_09-26-09

@Entry
@Component
struct Index {@State customPopup: boolean = false// popup构造器定义弹框内容@BuilderpopupBuilder() {Row() {Button("1")Button("2")}}build() {Column() {Button('CustomPopupOptions').position({ x: 100, y: 200 }).onClick(() => {this.customPopup = !this.customPopup}).bindPopup(this.customPopup, {builder: this.popupBuilder, // 气泡的内容placement: Placement.Bottom, // 气泡的弹出位置popupColor: Color.Pink, // 气泡的背景色})}.height('100%')}
}

参考链接

最后,想要更多了解气泡不同的用法,可以参考官方链接
%')
}
}


### 参考链接[最后,想要更多了解气泡不同的用法,可以参考官方链接](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-popup-and-menu-components-popup-V5#%E6%B0%94%E6%B3%A1%E6%A0%B7%E5%BC%8F)
http://www.lryc.cn/news/2403054.html

相关文章:

  • 【C】-递归
  • 飞马LiDAR500雷达数据预处理
  • Kerberos面试内容整理-在 Linux/Windows 中的 Kerberos 实践
  • 在 Allegro PCB Editor 中取消(解除或删除)已创建的 **Module** 的操作指南
  • 基于springboot的校园社团信息系统的设计与实现
  • nodejs里面的http模块介绍和使用
  • mamba架构和transformer区别
  • 嵌入式鸿蒙开发环境搭建操作方法与实现
  • 在 Spring Boot 中使用 WebFilter:实现请求拦截、日志记录、跨域处理等通用逻辑!
  • CSS预处理器:Sass与Less的语法和特性(含实际案例)
  • QT常用控件(1)
  • 明基编程显示器终于有优惠了,程序员快来,错过等一年!
  • 【计算机网络】非阻塞IO——select实现多路转接
  • Figma 中构建 Master Control Panel (MCP) 的完整设计方案
  • 什么是权威解析服务器?权威解析服务器哪些作用?
  • LeetCode--23.合并k个升序链表
  • ComfyUI 工作流
  • 使用glide 同步获取图片
  • 【推荐算法】NeuralCF:深度学习重构协同过滤的革命性突破
  • 负载均衡相关基本概念
  • 服务器中日志分析的作用都有哪些
  • 【React】useId
  • 【51单片机】0. 基础软件安装
  • 集成电路设计:从概念到实现的完整解析优雅草卓伊凡
  • 动态规划之网格图模型(二)
  • uniapp 集成腾讯云 IM 消息搜索功能
  • robot_lab——rsl_rl的train.py整体逻辑
  • AI推荐系统演进史:从协同过滤到图神经网络与强化学习的融合
  • Java-IO流之压缩与解压缩流详解
  • .NET 原生驾驭 AI 新基建实战系列(三):Chroma ── 轻松构建智能应用的向量数据库