气泡提示

基本用法

• 一种是系统提供的气泡

• 一种是开发者可以自定义的气泡 通过 builder

注意

1. 共同点:都是通过 bindPopup,里面两个参数, 第一个开关 第二个属性

2. 不同点:系统提供的气泡,里面属性是固定的,开发者自定义的气泡,通过 builder 构造器,里面属性是自定义的

文本提示气泡

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

@Entry
@Component
struct PopupExample {
    @State handlePopup: boolean = false;

    build() {
        Flex({ direction: FlexDirection.Column }) {
            // PopupOptions 类型设置弹框内容
            Button('PopupOptions')
                .onClick(() => {
                    this.handlePopup = !this.handlePopup;
                })
                .bindPopup(this.handlePopup, {
                    message: 'This is a popup with PopupOptions', // 内容
                    placement: Placement.Top, // 位置 要是放不开就自动选择
                    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: 150 })
        }
    }
}

文本自定义提示气泡

• 通过 builder 绑定自定义的弹框内容

• 通过bindPopup绑定弹框的属性

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

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

    build() {
        Flex({ direction: FlexDirection.Column }) {
            // CustomPopupOptions 类型设置弹框内容
            Button('CustomPopupOptions')
                .onClick(() => {
                    this.customPopup = !this.customPopup;
                })
                .bindPopup(this.customPopup, {
                    builder: this.popupBuilder,
                    placement: Placement.Top,
                    mask: { color: '#33000000' },
                    popupColor: Color.Yellow,
                    enableArrow: true,
                    showInSubWindow: false,
                    onStateChange: (e) => {
                        if (!e.isVisible) {
                            this.customPopup = false;
                        }
                    }
                })
                .position({ x: 80, y: 300 })


        }
    }
}