HarmonyOS鸿蒙最新鸿蒙HarmonyOS实战-ArkUI组件（Popup）_鸿蒙 pushkit(1)，2024年最新字节跳动算法面试题

本文链接：https://blog.csdn.net/2401_84850485/article/details/138985395

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

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

1.文本提示气泡

文本提示Popup气泡是一种在页面上弹出的提示框，通常用于向用户展示重要信息或提示用户进行操作。它可以显示文本、图标和按钮，并可以自定义样式和位置。在网站或应用程序中使用文本提示Popup气泡可以提高用户体验和交互性，帮助用户更好地理解和使用功能。

@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 })
}
}

在这里插入图片描述

2.带按钮提示气泡

带按钮提示的 Popup 气泡通常用于提供一些重要的提示信息以及给用户提供一些操作选项以及选择权。带按钮的提示气泡通常包含一个文本消息和一个或多个按钮，这些按钮使用户能够执行所需的操作或关闭提示。例如，您可能会看到带有“是”、“否”、“取消”按钮的提示气泡，以便用户可以选择执行或取消一项操作。

@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 })
}
}