鸿蒙HarmonyOS开发框架—学习ArkTS语言（基本语法四）_arkts中(1)}) }.width('100%'

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

在这里插入图片描述

🔎3.自定义气泡

自定义Popup气泡是指在设计和开发过程中，根据需求和设计风格，对Popup的样式、布局、交互等进行个性化定制的过程。通过自定义Popup气泡，可以让页面更加生动、实用、美观，提升用户体验和品牌形象。

@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 }) Text('This is Custom Popup').fontSize(15) }.width(200).height(50).padding(5) } 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%') } }

在这里插入图片描述