HarmonyOS 鸿蒙Next bindPopup 如何封装，我应用里有很多相同的气泡弹窗，只是里面文字不同，样式相同

HarmonyOS 鸿蒙Next bindPopup 如何封装，我应用里有很多相同的气泡弹窗，只是里面文字不同，样式相同尝试把里面的参数拿出来会报错

.bindPopup(this.customPopup, this.popup())

popup(): CustomPopupOptions {
  return {
    builder: this.popupBuilder,
    placement: Placement.Top,
    mask: false,
    radius: 4,
    popupColor: $r('app.color.color_FFFFFF'),
    enableArrow: true,
    showInSubWindow: false,
    onStateChange: (e) => {
      if (!e.isVisible) {
        this.customPopup = false
      }
    }
  }
}
@Builder
popupBuilder() {
  Row() {
    Text($r('app.string.cloud_warehouse_mode_only_message'))
      .fontSize(12)
      .fontColor($r('app.color.color_00A6F5'))
  }.width(280).padding(10)
}

这种写法会报

Error message:Cannot read property observeComponentCreation2 of undefined

SourceCode:

必须写成

.bindPopup(this.customPopup,
  {
    builder: this.popupBuilder,
    placement: Placement.Top,
    mask: false,
    radius: 4,
    popupColor: $r('app.color.color_FFFFFF'),
    enableArrow: true,
    showInSubWindow: false,
    onStateChange: (e) => {
      if (!e.isVisible) {
        this.customPopup = false
      }
    }
  }
)

@Builder
popupBuilder() {
  Row() {
    Text($r('app.string.cloud_warehouse_mode_only_message'))
      .fontSize(12)
      .fontColor($r('app.color.color_00A6F5'))
  }.width(280).padding(10)
}

this.observeComponentCreation2((elmtId, isInitialRender) => {

更多关于HarmonyOS 鸿蒙Next bindPopup 如何封装，我应用里有很多相同的气泡弹窗，只是里面文字不同，样式相同的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

yuanlaile 1楼•6 天前

bindPopup这么写是没问题的，observeComponentCreation2是什么

yibo5220 2楼•6 天前

.bindPopup(this.customPopup, this.popup.bind(this))

可以这样写，调的时候增加bind就行了

htzhanglong 3楼•6 天前

遇到同样的问题，不知道怎么解决。UI限制太多了

eggper 4楼•6 天前

(parent ? parent : this).observeComponentCreation2((elmtId, isInitialRender) => { ^

API12同样报错，

sinazl 5楼•6 天前

有要学HarmonyOS AI的同学吗，联系我：https://www.itying.com/goods-1206.html

yibo5220 6楼•6 天前

你用的api是多少，next版本这样写没有报错

yuanlaile 7楼•6 天前

姓名: 张三职位: 软件工程师邮箱: zhangsan@example.com 电话: (123) 456-7890

h691938207 8楼•6 天前作者

我 dialog 是在点击的时候才 new 出来的。

wuwangju 9楼•6 天前

或都有什么其他的写法，太难用了，服了

eggper 10楼•6 天前

在HarmonyOS鸿蒙Next中，bindPopup用于绑定气泡弹窗。如果你有多个样式相同但文字不同的气泡弹窗，可以通过封装一个通用的弹窗组件来实现代码复用。

首先，创建一个自定义的弹窗组件，例如CommonPopup。在这个组件中，定义弹窗的样式和布局，并通过参数传递不同的文字内容。

@Component
export struct CommonPopup {
  @State message: string = '';

  build() {
    Column() {
      Text(this.message)
        .fontSize(16)
        .fontColor(Color.Black)
        .margin({ top: 10, bottom: 10 })
    }
    .width('80%')
    .padding(20)
    .backgroundColor(Color.White)
    .borderRadius(8)
  }
}

然后，在你的页面中使用bindPopup绑定这个自定义弹窗组件，并通过参数传递不同的文字内容。

@Entry
@Component
struct Index {
  @State popupVisible: boolean = false;
  @State popupMessage: string = '';

  build() {
    Column() {
      Button('Show Popup')
        .onClick(() => {
          this.popupMessage = 'This is a popup message';
          this.popupVisible = true;
        })
    }
    .bindPopup({
      builder: () => {
        CommonPopup({ message: this.popupMessage })
      },
      visibility: this.popupVisible,
      onVisibilityChange: (visible) => {
        this.popupVisible = visible;
      }
    })
  }
}

通过这种方式，你可以在应用中复用相同样式的气泡弹窗，只需传递不同的文字内容即可。

vueper 11楼•6 天前

在HarmonyOS中，可以通过封装bindPopup方法来复用相同样式的气泡弹窗。首先，创建一个通用的弹窗组件，接受文本内容作为参数。然后，在需要的地方调用该组件，传入不同的文本。具体步骤如下：

创建通用弹窗组件：定义一个函数，接受文本参数，返回配置好的Popup对象。
调用组件：在需要显示弹窗的地方，调用该函数并传入不同的文本。

示例代码：

function createPopup(text) {
    return {
        message: text,
        duration: 2000,
        placement: 'bottom'
    };
}

// 使用
this.$element('button').bindPopup(createPopup('Hello, HarmonyOS!'));

这样，你可以在应用中复用相同样式的弹窗，只需传入不同的文本即可。