鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：Popup控制）

news2024/12/27 15:41:37

给组件绑定popup弹窗，并设置弹窗内容，交互逻辑和显示状态。

说明：

  • 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

  • popup弹窗的显示状态在onStateChange事件回调中反馈，其显隐与组件的创建或销毁无强对应关系。

bindPopup

bindPopup(show: boolean, popup: PopupOptions | CustomPopupOptions)

给组件绑定Popup弹窗。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
showboolean是弹窗显示状态，默认值为false，隐藏弹窗。
show: 弹窗显示状态，默认值为false，隐藏弹窗。popup弹窗必须等待页面全部构建完成才能展示，因此show不能在页面构建中设置为true，否则会导致popup弹窗显示位置及形状错误。
popup: 配置当前弹窗提示的参数。
popupPopupOptions | CustomPopupOptions8+是配置弹出弹窗的参数。

PopupOptions类型说明

名称类型必填描述
messagestring是弹窗信息内容。
placementOnTop(deprecated)boolean否是否在组件上方显示，默认值为false。
说明：
从 API version 10 开始废弃，建议使用placement替代。
primaryButton{
value: string,
action: () => void
}		否第一个按钮。
value: 弹窗里主按钮的文本。
action: 点击主按钮的回调函数。
secondaryButton{
value: string,
action: () => void
}		否第二个按钮。
value: 弹窗里辅助按钮的文本。
action: 点击辅助按钮的回调函数。
onStateChange(event: { isVisible: boolean }) => void否弹窗状态变化事件回调，参数isVisible为弹窗当前的显示状态。
arrowOffset9+Length否popup箭头在弹窗处的偏移。箭头在气泡上下方时，数值为0表示箭头居最左侧，偏移量为箭头至最左侧的距离，默认居中。箭头在气泡左右侧时，偏移量为箭头至最上侧的距离，默认居中。如果显示在屏幕边缘，气泡会自动左右偏移，数值为0时箭头始终指向绑定组件。
showInSubWindow9+boolean否是否在子窗口显示气泡，默认值为false。
mask10+boolean | ResourceColor否设置气泡是否有遮罩层及遮罩颜色。如果设置为false，则没有遮罩层；如果设置为true，则设置有遮罩层并且颜色为透明色；如果设置为Color，则为遮罩层的颜色。
messageOptions10+PopupMessageOptions否设置弹窗信息文本参数。
targetSpace10+Length否设置popup与目标的间隙。
placement10+Placement否设置popup组件相对于目标的显示位置，默认值为Placement.Bottom。
如果同时设置了placementOnTop和placement，则以placement的设置生效。
offset10+Position否设置popup组件相对于placement设置的显示位置的偏移。
说明：
不支持设置百分比。
enableArrow10+boolean否设置是否显示箭头。
默认值：true
popupColor11+Color | string | number |  Resource否提示气泡的颜色。
默认值：透明色TRANSPARENT加模糊背景填充效果COMPONENT_ULTRA_THICK。
autoCancel11+boolean否页面有操作时，是否自动关闭气泡。
默认值：true
width11+Dimension否弹窗宽度。
arrowPointPosition11+ArrowPointPosition否气泡尖角相对于父组件显示位置，气泡尖角在垂直和水平方向上有 ”Start“、”Center“、”End“三个位置点可选。以上所有位置点均位于父组件区域的范围内，不会超出父组件的边界范围。

PopupMessageOptions10+类型说明

名称类型必填描述
textColorResourceColor否设置弹窗信息文本颜色。
fontFont否设置弹窗信息字体属性。

CustomPopupOptions8+类型说明

名称类型必填描述
builderCustomBuilder是提示气泡内容的构造器。
说明：
popup为通用属性，自定义popup中不支持再次弹出popup。对builder下的第一层容器组件不支持使用position属性，如果使用将导致气泡不显示。builder中若使用自定义组件，自定义组件的aboutToAppear和aboutToDisappear生命周期与popup弹窗的显隐无关，不能使用其生命周期判断popup弹窗的显隐。
placementPlacement否气泡组件优先显示的位置，当前位置显示不下时，会自动调整位置。
默认值：Placement.Bottom
popupColorResourceColor否提示气泡的颜色。
API version 10，默认值：'#4d4d4d'
API version 11及以后，默认值：透明色TRANSPARENT加模糊背景填充效果COMPONENT_ULTRA_THICK
enableArrowboolean否是否显示箭头。
从API Version 9开始，如果箭头所在方位侧的气泡长度不足以显示下箭头，则会默认不显示箭头。比如：placement设置为Left，此时如果气泡高度小于箭头的宽度（32vp）与气泡圆角两倍（48vp）之和（80vp），则实际不会显示箭头。
默认值：true
autoCancelboolean否页面有操作时，是否自动关闭气泡。
默认值：true
说明：
如果要实现点击气泡内消失需要在builder中先放一个布局组件，然后再将Popup高级组件放在布局组件里面，再在布局组件的onClick事件中修改的传入bindPopup的变量（show: boolean）值。
onStateChange(event: { isVisible: boolean }) => void否弹窗状态变化事件回调，参数为弹窗当前的显示状态。
arrowOffset9+Length否popup箭头在弹窗处的偏移。箭头在气泡上下方时，数值为0表示箭头居最左侧，偏移量为箭头至最左侧的距离，默认居中。箭头在气泡左右侧时，偏移量为箭头至最上侧的距离，默认居中。如果显示在屏幕边缘，气泡会自动左右偏移，数值为0时箭头始终指向绑定组件。
showInSubWindow9+boolean否是否在子窗口显示气泡，默认值为false。
maskColor(deprecated)ResourceColor否设置气泡遮罩层颜色。
说明：
从 API version 10 开始废弃，建议使用mask替代。
mask10+boolean | ResourceColor否设置气泡是否有遮罩层及遮罩颜色。如果设置为false，则没有遮罩层；如果设置为true，则设置有遮罩层并且颜色为透明色；如果设置为Color，则为遮罩层的颜色。
targetSpace10+Length否设置popup与目标的间隙。
offset10+Position否设置popup组件相对于placement设置的显示位置的偏移。
说明：
不支持设置百分比。
width11+Dimension否弹窗宽度。
arrowPointPosition11+ArrowPointPosition否气泡尖角相对于父组件显示位置，气泡尖角在垂直和水平方向上有 ”Start“、”Center“、”End“三个位置点可选。以上所有位置点均位于父组件区域的范围内，不会超出父组件的边界范围。

示例

示例1

// xxx.ets
@Entry
@Component
struct PopupExample {
  @State handlePopup: boolean = false
  @State customPopup: boolean = false

  // popup构造器定义弹框内容
  @Builder popupBuilder() {
    Row({ space: 2 }) {
      Image($r("app.media.image")).width(24).height(24).margin({ left: -5 })
      Text('Custom Popup').fontSize(10)
    }.width(100).height(50).padding(5)
  }

  build() {
    Flex({ direction: FlexDirection.Column }) {
      // PopupOptions 类型设置弹框内容
      Button('PopupOptions')
        .onClick(() => {
          this.handlePopup = !this.handlePopup
        })
        .bindPopup(this.handlePopup, {
          message: 'This is a popup with PopupOptions',
          placementOnTop: true,
          showInSubWindow:false,
          primaryButton: {
            value: 'confirm',
            action: () => {
              this.handlePopup = !this.handlePopup
              console.info('confirm Button click')
            }
          },
          // 第二个按钮
          secondaryButton: {
            value: 'cancel',
            action: () => {
              this.handlePopup = !this.handlePopup
              console.info('cancel Button click')
            }
          },
          onStateChange: (e) => {
            console.info(JSON.stringify(e.isVisible))
            if (!e.isVisible) {
              this.handlePopup = false
            }
          }
        })
        .position({ x: 100, y: 50 })


      // CustomPopupOptions 类型设置弹框内容
      Button('CustomPopupOptions')
        .onClick(() => {
          this.customPopup = !this.customPopup
        })
        .bindPopup(this.customPopup, {
          builder: this.popupBuilder,
          placement: Placement.Top,
          mask: {color:'0x33000000'},
          popupColor: Color.Yellow,
          enableArrow: true,
          showInSubWindow: false,
          onStateChange: (e) => {
            if (!e.isVisible) {
              this.customPopup = false
            }
          }
        })
        .position({ x: 80, y: 200 })
    }.width('100%').padding({ top: 5 })
  }
}

figures/popup.gif

示例2

// xxx.ets
@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',
          messageOptions: {
            textColor: Color.Red,
            font: {
              size: '14vp',
              style: FontStyle.Italic,
              weight: FontWeight.Bolder
            }
          },
          placement: Placement.Bottom,
          enableArrow: false,
          targetSpace: '15vp',
          onStateChange: (e) => {
            console.info(JSON.stringify(e.isVisible))
            if (!e.isVisible) {
              this.handlePopup = false
            }
          }
        })
    }.margin(20)
  }
}

示例3

// xxx.ets
@Entry
@Component
struct PopupExample {
  @State customPopup: boolean = false

  // popup构造器定义弹框内容
  @Builder popupBuilder() {
    Row() {
      Text('Custom Popup Message').fontSize(10)
    }.height(50).padding(5)
  }

  build() {
    Column() {
      // CustomPopupOptions 类型设置弹框内容
      Button('CustomPopupOptions')
        .onClick(() => {
          this.customPopup = !this.customPopup
        })
        .bindPopup(this.customPopup, {
          builder: this.popupBuilder,
          targetSpace: '15vp',
          enableArrow: false,
          onStateChange: (e) => {
            if (!e.isVisible) {
              this.customPopup = false
            }
          }
        })
    }.margin(20)
  }
}

示例4

// xxx.ets
@Entry
@Component
struct PopupExample {
  @State handlePopup: boolean = false
    
  build() {
    Column() {
      Button('PopupOptions')
        .position({ x: 100, y: 50 })
        .onClick(() => {
          this.handlePopup = !this.handlePopup
        })
        .bindPopup(this.handlePopup, {
          width: 300,
          message: 'This is a popup with PopupOptions',
          arrowPointPosition: ArrowPointPosition.START,
          popupColor: Color.Red,
          autoCancel: true,
        })
    }
    .width('100%')
    .height('100%')
  }
}

示例5

// xxx.ets
import { Popup , PopupOptions,PopupTextOptions, PopupButtonOptions, PopupIconOptions } from '@ohos.arkui.advanced.Popup';

@Entry
@Component
struct PopupExample {
  @State customPopup: boolean = false

  @Builder
  popupBuilder() {
    // popup 自定义高级组件
    Popup({
      //PopupIconOptions 类型设置图标内容
      icon: {
        image: $r('app.media.icon'),
        width:32,
        height:32,
        fillColor:Color.White,
        borderRadius: 16,
      } as PopupIconOptions,
      // PopupTextOptions 类型设置文字内容
      title: {
        text: 'This is a popup with CustomPopupOptions',
        fontSize: 20,
        fontColor: Color.Black,
        fontWeight: FontWeight.Normal,

      } as PopupTextOptions,
      //PopupTextOptions 类型设置文字内容
      message: {
        text: 'This is the message',
        fontSize: 15,
        fontColor: Color.Black,
        fontWeight: FontWeight.Normal,
      } as PopupTextOptions,
      showClose: false,
      onClose: () => {
        console.info('close Button click')
        this.customPopup = false
      },
      // PopupButtonOptions 类型设置按钮内容
      buttons: [{
        text: 'confirm',
        action: () => {
          console.info('confirm button click')
          this.customPopup = false
        },
        fontSize: 15,
        fontColor: Color.Black,

      },
        {
          text: 'cancel',
          action: () => {
            console.info('cancel button click')
            this.customPopup = false
          },
          fontSize: 15,
          fontColor: Color.Black,
        },] as [PopupButtonOptions?, PopupButtonOptions?],
    })
  }

  build() {
    Column() {
      Button('CustomPopupOptions')
        .onClick(() => {
          this.customPopup = !this.customPopup
        })
        .position({ x: 80, y: 200 })
        .bindPopup(this.customPopup, {
          builder: this.popupBuilder,
          width: 300,
          arrowPointPosition: ArrowPointPosition.END,
        })
    }
    .width('100%')
    .height('100%')
  }
}

示例6

// xxx.ets

@Entry
@Component
struct PopupExample {
  @State cursorPopup: boolean = false

  build() {
    Column() {
      TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'})
        .position({ x: 0, y: 350 })
        .onFocus(() => {
          this.cursorPopup = !this.cursorPopup
        })
        .selectionMenuHidden(true)
        .bindPopup(this.cursorPopup, {
          width: 300,
          message: 'This is a pop-up window that appears with the cursor',
          arrowPointPosition: ArrowPointPosition.CENTER,
          popupColor: Color.Green,
          autoCancel: true,

        })
    }
    .width('100%')
    .height('100%')
  }
}

最后，有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（Harmony NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（Harmony NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

 获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（Harmony NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1484632.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

如何修炼成“神医”——《OceanBase诊断系列》之一

如何修炼成“神医”——《OceanBase诊断系列》之一

本系列是基于OcenaBase 开发工程师在工作中的一些诊断经验，也欢迎大家分享相关经验。 1. 关于神医的故事 扁鹊，中国古代第一个被正史记载的医生，他的成才之路非常传奇。年轻时，扁鹊是一家客栈的主管。有一位名叫长桑君的客人来到…
阅读更多...
Vue3_2024_2天【Vue3组合式setup用法及响应式ref和reactive】

Vue3_2024_2天【Vue3组合式setup用法及响应式ref和reactive】

第一：浅谈 | 不可不知 1.vue3目录介绍（区别Vue2没有的） vue3，默认使用ts语言，但是ts一开始无法识别某些文件，这里是系统默认配置； 2.vue2中的入口文件是main.js，而vue3这里的入口文…
阅读更多...
2024年2月最新微信域名检测拦截接口源码

2024年2月最新微信域名检测拦截接口源码

这段PHP代码用于检测指定域名列表中的域名是否被封。代码首先定义了一个包含待检测域名的数组 $domainList，然后遍历该数组，对每个域名发送HTTP请求并检查响应内容以判断域名是否被封。 具体步骤如下： 1. 定义待检测的域名列表。 2. 遍历域名…
阅读更多...
探索Manticore Search：开源全文搜索引擎的强大功能

探索Manticore Search：开源全文搜索引擎的强大功能

在当今信息爆炸的时代，数据的快速检索变得至关重要。无论是在电子商务网站、新闻门户还是企业内部文档，高效的搜索引擎都是确保用户满意度和工作效率的关键因素之一。而在搜索引擎领域，Manticore Search 作为一款开源的全文搜索引擎&#xff…
阅读更多...
制作镜像与配置推送阿里云仓库

制作镜像与配置推送阿里云仓库

一、制作jdk镜像 1.1、Alpine linux简介 Alpine Linux是一个轻量级的Linux发行版，专注于安全、简洁和高效。它采用了musl libc和BusyBox，使得系统资源占用较少，启动速度较快。 Alpine Linux也提供了一个简单的包管理工具APK，(注…
阅读更多...
C2_W2_Assignment_吴恩达_中英_Pytorch

C2_W2_Assignment_吴恩达_中英_Pytorch

Neural Networks for Handwritten Digit Recognition, Multiclass In this exercise, you will use a neural network to recognize the hand-written digits 0-9. 在本次练习中，您将使用神经网络来识别0-9的手写数字。 Outline 1 - Packages 2 - ReLU Activatio…
阅读更多...
php连接hdfs初步探索

php连接hdfs初步探索

一、phdfs拓展 结果：暂时舍弃 安装此拓展时，无法make成功，因为缺少hdfs.n文件。 换了其他版本的拓展包，并编译都没有找到此文件。 后搜到官网的相关资料，此hdfs.h的文件路径的地址是$HADOOP_HDFS_HOME/include/hdfs…
阅读更多...
win11 更多网络适配器选项

win11 更多网络适配器选项

win11更多网络适配器选项查找路径：控制面板→网络和共享中心→更改适配器设置
阅读更多...
SQL 术语：Join 中的 Build 和 Probe 是什么意思？

SQL 术语：Join 中的 Build 和 Probe 是什么意思？

博主历时三年精心创作的《大数据平台架构与原型实现：数据中台建设实战》一书现已由知名IT图书品牌电子工业出版社博文视点出版发行，点击《重磅推荐：建大数据平台太难了！给我发个工程原型吧！》了解图书详情，…
阅读更多...
大数据和机器学习在气象预报中的应用-张平文院士

大数据和机器学习在气象预报中的应用-张平文院士

报告链接：张平文院士 -- 大数据和机器学习在气象预报中的应用_哔哩哔哩_bilibili
阅读更多...
Github项目推荐-LightMirrors

Github项目推荐-LightMirrors

项目地址 https://github.com/NoCLin/LightMirrors 项目简述 “LightMirrors是一个开源的缓存镜像站服务，用于加速软件包下载和镜像拉取。目前支持DockerHub、PyPI、PyTorch、NPM等镜像缓存服务。 当前项目仍处于早期阶段。”–来自项目说明。 也就是说&#xff…
阅读更多...
Jenkins的安装和helloworld Pipeline

Jenkins的安装和helloworld Pipeline

文章目录 环境安装下载安装启动初始化 PipelineUISCM（Source Control Management）准备pipeline 参考 环境 RHEL 9.3Jenkins 2.44.0.1 安装 参考 https://www.jenkins.io/doc/book/installing/linux/#red-hat-centos 。 下载安装 [ding192 ~]$ sudo …
阅读更多...
内存占用构造方法

内存占用构造方法

#使用虚拟内存构造内存消耗 mkdir /tmp/memory mount -t tmpfs -o size5G tmpfs /tmp/memory dd if/dev/zero of/tmp/memory/block #释放消耗的虚拟内存 rm -rf /tmp/memory/block umount /tmp/memory rmdir /tmp/memory #内存占用可直接在/dev/shm目录下写文件
阅读更多...
【Deep Dive:AI Webinar】我们是否能将开源许可用于机器学习和人工智能模型?

【Deep Dive:AI Webinar】我们是否能将开源许可用于机器学习和人工智能模型?

【深入探讨人工智能】网络研讨系列总共有 17 个视频。我们按照视频内容，大致上分成了 3 个大类： 1. 人工智能的开放、风险与挑战（4 篇） 2. 人工智能的治理（总共 12 篇），其中分成了几个子类&…
阅读更多...
Revit-二开之创建线性尺寸标注-(5)

Revit-二开之创建线性尺寸标注-(5)

创建线性尺寸标注 对应的Revit界面的按钮 线性尺寸标注源码 本篇文章实现的逻辑是从rvt文章中拾取一面墙，然后对墙添加再水平方向上的线性尺寸标注 protected override Result OnExecute(ExternalCommandData commandData, ref string message, ElementSet elements
阅读更多...
使用 llama.cpp 在本地部署 AI 大模型的一次尝试

使用 llama.cpp 在本地部署 AI 大模型的一次尝试

对于刚刚落下帷幕的2023年，人们曾经给予其高度评价——AIGC元年。随着 ChatGPT 的火爆出圈，大语言模型、AI 生成内容、多模态、提示词、量化…等等名词开始相继频频出现在人们的视野当中，而在这场足以引发第四次工业革命的技术浪潮里，人们对于人工智能的态度，正从一开始的…
阅读更多...
快速入门规则引擎

快速入门规则引擎

文章首发于微信公众号：职谷智享 一、什么是规则引擎 当我们在对复杂的业务进行开发时，程序本身逻辑代码和业务代码互相嵌套、错综复杂，同时维护成本高，可拓展性差。 可降低复杂业务逻辑组件复杂性、降低应用程序的维护和可扩展…
阅读更多...
alibabacloud学习笔记07（小滴课堂）

alibabacloud学习笔记07（小滴课堂）

讲解Sentinel自定义异常降级-新旧版本差异 讲解新版Sentinel自定义异常数据开发实战 如果我们都使用原生的报错，我们就无法得到具体的报错信息。 所以我们要自定义异常返回的数据提示： 实现BlockExceptionHandler并且重写handle方法： 使用F…
阅读更多...
【C++】十大排序算法之 冒泡排序 选择排序

【C++】十大排序算法之 冒泡排序 选择排序

本次介绍内容参考自：十大经典排序算法（C实现） - fengMisaka - 博客园 (cnblogs.com) 排序算法是《数据结构与算法》中最基本的算法之一。 十种常见排序算法可以分为两大类： 比较类排序：通过比较来决定元素间的相对次序…
阅读更多...
linux系统Jenkins工具流水线项目发布

linux系统Jenkins工具流水线项目发布

流水线发布 pipline语法介绍阶段指令 创建流水线项目流水线脚本基础框架 pipline语法介绍 声明式的pipeline语法格式 1. 所有的声明都必须包含在pipeline{}中 2. 块只能有节段，指令，步骤或者赋值语句组成 3. 阶段：agent，stages&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023