HarmonyOS 鸿蒙Next popup自定义自己的背景

发布于 1周前 作者 itying888 来自 鸿蒙OS

HarmonyOS 鸿蒙Next popup自定义自己的背景 自定义popup，设置使用自己的气泡图片当做背景，但是会有一个白色白底背景。是无法取消这个白色背景吗？

代码：

@Builder
TabCourseBuilder(title: string, index: number, selectedImg: Resource, normalImg: Resource) {
  Stack() {
    this.TabBuilder(title, index, selectedImg, normalImg)
  }.bindPopup(this.courseBubbleManager.courseBubbleState == CourseBubbleState.HAS_LIVING, {
    builder: this.popupBuilder,
    popupColor:Color.Transparent,
    mask:{color:Color.Transparent},
    enableArrow: false,
    backgroundBlurStyle:BlurStyle.NONE,
    shadow:ShadowStyle.OUTER_DEFAULT_XS,

    placement:Placement.Top })
}

@Builder
popupBuilder() {
  Row() {
    Canvas(this.mainCanvasRenderingContext)
      .onReady(() => {
        console.info(TAG, 'Canvas onReady')
        this.animateItem = lottie.loadAnimation({
          container: this.mainCanvasRenderingContext,
          renderer: 'canvas', // canvas 渲染模式
          autoplay: false,
          path: 'lottie/bubble/index_course_living_bubble_anim.json', // 路径加载动画只支持entry/src/main/ets 文件夹下的相对路径
        })
        this.animateItem?.setDirection?(1)
        this.animateItem?.play?()
        console.info(TAG, 'animateItem play')
      })
      .width(10)
      .height(10.5)
      .margin({ left: 16 })
      .backgroundColor(Color.Green)

    Text('我的课程正在直播')
      .fontSize(14)
      .fontColor(Color.Black)
      .margin({ left: 4, right: 16 })
  }.justifyContent(FlexAlign.Center)
  .padding({top: 16,bottom:16})
  .backgroundImage($r("app.media.yk_has_living_tips3x"))
  .backgroundImageSize(ImageSize.FILL)
}

更多关于HarmonyOS 鸿蒙Next popup自定义自己的背景的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

参考demo:

@Entry
@Component
struct BindPopupDemo {

  // 第一步：定义变量控制弹窗显示
  @State customPopup: boolean = false;

  // 第二步：popup构造器定义弹框内容
  @Builder
  customBubbleInstructionBuilder() {
    Stack() {
      Text() {
        Span("2021年12月20日-2022月1日30日每人限购8件 您已购买3件，还可购5件").fontSize(12)
        Span("您已购买3件，还可购5件").fontSize(14)
      }.fontColor(Color.White)
      .maxLines(2).textOverflow({ overflow: TextOverflow.Ellipsis }).ellipsisMode(EllipsisMode.END)
    }.backgroundColor(Color.Green)
    .width(100)
    .padding({
      left: 12,
      right: 12,
      top: 18,
      bottom: 8
    })
  }

  build() {
    Column() {

      Button('click')
        // 第四步：创建点击事件，控制弹窗显隐
        .onClick(() => {
          this.customPopup = !this.customPopup;
        })
        .backgroundColor(0xf56c6c)
          // 第三步：使用bindPopup接口将弹窗内容绑定给元素
        .bindPopup(this.customPopup, {
          builder: this.customBubbleInstructionBuilder,
          placement: Placement.Top,
          maskColor: 0x33000000,
          popupColor: Color.Green,
          enableArrow: true,
          radius: '10vp', // 设置气泡的圆角
          backgroundBlurStyle: BlurStyle.NONE, // 设置箭头颜色
          onStateChange: (e) => {
            if (!e.isVisible) {
              this.customPopup = false;
            }
          }
        })
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height(437)
  }
}

更多关于HarmonyOS 鸿蒙Next popup自定义自己的背景的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙）系统中，自定义Next Popup的背景可以通过修改其样式和布局来实现。鸿蒙系统提供了丰富的UI组件和样式定制能力，允许开发者根据需求进行个性化调整。

要自定义Next Popup的背景，你可以按照以下步骤进行：

  1. 定义自定义布局：首先，你需要创建一个自定义的布局文件（XML格式），在该文件中定义你想要的背景样式以及其他UI元素。

  2. 设置Popup窗口内容：在代码中，通过指定的方法将自定义布局设置为Popup窗口的内容。鸿蒙系统提供了相应的API来设置Popup的视图内容。

  3. 调整背景属性：在自定义布局文件中，你可以通过修改背景颜色、背景图片等属性来自定义Popup的背景。鸿蒙系统支持多种背景设置方式，如纯色背景、渐变背景以及图片背景等。

  4. 显示Popup：最后，通过调用Popup的相关方法来显示自定义背景的Popup窗口。

请注意，具体的实现细节可能因鸿蒙系统的版本和具体需求而有所不同。如果你在实现过程中遇到任何问题，建议参考鸿蒙系统的官方文档或相关开发指南。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html，

回到顶部