HarmonyOS 鸿蒙Next 气泡弹出

HarmonyOS 鸿蒙Next 气泡弹出 cke_136.png

图片自定义组件函数中的设置了气泡点击弹出，为什么其他的非自定义组件也会有气泡弹出？


更多关于HarmonyOS 鸿蒙Next 气泡弹出的实战教程也可以访问 https://www.itying.com/category-93-b0.html

11 回复

  1. 气泡的背景色没有改变：你使用的是自定义popup，必须指定builder，如果使用message则使用默认的，设置的那些属性不生效，具体可以看官网自定义 https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-universal-attributes-popup-0000001427744792-V3

  2. 出现两处的问题我看你代码是不会复现的，可以排查是否其他引用影响的

更多关于HarmonyOS 鸿蒙Next 气泡弹出的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


builder：this.messageRender是不是你自定义的变量？

那个是@builder自定义函数组件，里面是气泡框展示内容，

请问怎么声明messageRender的值呢？

如果这样声明messageRender的值，预览会报错的

请先。。。

牛掰大佬！，我再去仔细看下官方文档，

import CommonConstants from '../../common/constants/CommonConstants';

@Entry
@Component
struct test {
    @State is_agree:boolean = false

    //同意按钮自定义函数装饰组件
    @Builder selection_button(icon:Resource){
        Image(icon)
            .objectFit(ImageFit.Contain)
            .width(20)
            .height(20)
                //点击事件，取反状态变量is_agree
            .onClick(() => {
                this.is_agree = !this.is_agree
            })
                //点击事件触发显示气泡组件,true不做操作,false显示气泡
            .bindPopup(this.is_agree, {
                message: "请先阅读并勾选协议后进行登陆",
                popupColor: $r("app.color.popup"),
                placement:Placement.Top
            }
            )
    }

    build(){
        Column({space:100}){

            Row(){
                Image($r("app.media.back"))
                    .width(20)
                    .height(20)
                    .offset({ x: '10vp',y:'20vp'})
            }
            .width(CommonConstants.FULL_PARENT)

            Row(){
                //切换同意按钮状态
                if (this.is_agree){
                    this.selection_button($r('app.media.ic_ok'))
                } else {
                    this.selection_button($r('app.media.ic_default'))
                }

                //协议文案
                Text($r("app.string.Login_instructions"))
                    .fontSize(13)
                    .fontColor($r("app.color.input_color"))
            }
        }
        .backgroundColor(Color.Black)
        .width(CommonConstants.FULL_PARENT)
        .height(CommonConstants.FULL_PARENT)
    }
}

并且气泡的背景色也没有改变？

问题解决了吗？

HarmonyOS鸿蒙Next中的气泡弹出功能主要用于提供简洁的提示信息或操作选项。气泡弹出通常通过Popup组件实现，开发者可以自定义气泡的内容、位置、样式等。以下是实现气泡弹出的基本步骤：

  1. 创建Popup对象：使用Popup类创建一个气泡对象。
  2. 设置气泡内容：可以通过setContent方法设置气泡中显示的内容，内容可以是文本、按钮或其他UI组件。
  3. 设置气泡位置：使用setPosition方法指定气泡弹出的位置，通常基于某个控件的边界或屏幕坐标。
  4. 设置气泡样式：通过setBackground等方法自定义气泡的背景、边框、阴影等样式。
  5. 显示气泡：调用show方法在指定位置显示气泡。
  6. 关闭气泡：可以通过hide方法手动关闭气泡，或设置自动关闭时间。

示例代码片段：

let popup = new Popup();
popup.setContent("这是一个气泡提示");
popup.setPosition(100, 200); // 设置气泡弹出位置
popup.show();

鸿蒙Next的气泡弹出功能支持动画效果、触摸外部关闭等交互特性，开发者可根据需求灵活配置。

回到顶部