HarmonyOS 鸿蒙Next 组件.bindPopup属性使用问题

发布于 1周前 作者 eggper 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 组件.bindPopup属性使用问题
@Builder自定义组件中 使用bindPopup 没有任何效果。.bindPopup属性是否只能在Bulid中使用

@Component
export struct PatientFollowUpPage {
  onDestinationBack: () => boolean = () => false;
  @Consume('appPathStack') appPathStack: NavPathStack;
  @Prop patientItem:HisPatientListVosDTO = new HisPatientListVosDTO()
  @State showPopup: boolean = false;
  private menus: Menu[] = [{
    content: "新增计划",
    imageSource:$r('app.media.followPlanIcon')
  }, {
    content: "新增随访",
    imageSource:$r('app.media.addFollowUpIcon')
  }
  ]

  build() {
    NavDestination(){
      Column(){
        CommonToolBar({
          toolBarTitle:$r('app.string.patient_followUp'),
          onBackClick:() => this.onDestinationBack(),

          rightCustomView:() =>{
            this.navBarRightComponent(this.showPopup)
          }

        })
      }
      .width(CommonConstants.FULL_PARENT)
      .height(CommonConstants.FULL_PARENT)
      .justifyContent(FlexAlign.Start)
    }
    .backgroundColor($r('app.color.global_pageBack_F1F2F5'))
    .hideTitleBar(true)
  }
  // 导航右侧自定义区
  [@Builder](/user/Builder)
  navBarRightComponent($$:boolean){

    Row(){
      Image($r('app.media.base_filter'))
        .width(28).height(28)
        .margin({ right:16 })
        .onClick( ()=> {})
        .id('filter_data_image')

      Image($r('app.media.patientAdd'))
        .width(28).height(28)
        .id('add_data_image')
        .bindPopup($$,{
          builder: shortImageCutsPopupBuilder<Menu>(this.menus,128, (data, position) => {
            $$ = false
          }),
          placement: Placement.TopRight,
          enableArrow: true,
          radius: 8,
          popupColor: $r('app.color.global_black_FF333333'),
          backgroundBlurStyle: BlurStyle.NONE,
          onStateChange: (e) => {
            if (!e.isVisible) {
              $$ = false;
            }
          }
        })
        .onClick(() =>{
          $$ = !$$
        })
    }
    .alignRules({
      right:{anchor:AppConstants.RELATIVE_CONTAINER_ID,align:HorizontalAlign.End},
      center:{anchor:AppConstants.RELATIVE_CONTAINER_ID,align:VerticalAlign.Center}
    })
    .margin({right:16})
    .alignItems(VerticalAlign.Center)
    .height('100%')
    .backgroundColor(Color.Red)
    .id('navBarRight')
  }
}

更多关于HarmonyOS 鸿蒙Next 组件.bindPopup属性使用问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

bindPopup是可以写在[@Builder](/user/Builder)自定义组件中的

参考以下demo:

// xxx.ets

[@Entry](/user/Entry)

[@Component](/user/Component)

struct PopupExample {

  [@State](/user/State) handlePopup: boolean = false

  [@State](/user/State) customPopup: boolean = false

  // popup构造器定义气泡内容

  [@Builder](/user/Builder) popupBuilder() {

    Row() {

      Text('Custom Popup Message').fontSize(10)

      Button('PopupOptions')

        .onClick(() => {

          this.handlePopup = !this.handlePopup

        })

        .bindPopup(this.handlePopup, {  // PopupOptions类型气泡的内容

          message: 'This is a popup with PopupOptions',

          messageOptions: { // 气泡的文本样式

            textColor: Color.Red,

            font: {

              size: '14vp',

              style: FontStyle.Italic,

              weight: FontWeight.Bolder

            }

          },

          placement: Placement.Bottom,

          enableArrow: false,

          targetSpace: '15vp',

          onStateChange: (e) => {

            console.info(JSON.stringify(e.isVisible))

            if (!e.isVisible) {

              this.handlePopup = false

            }

          }

        })

    }.height(50).padding(5)

  }

  build() {

    Column({space: 100}) {

      Button('CustomPopupOptions')

        .onClick(() => {

          this.customPopup = !this.customPopup

        })

        .bindPopup(this.customPopup, {  // CustomPopupOptions类型气泡的内容

          builder: this.popupBuilder,

          targetSpace: '15vp',

          enableArrow: false, 

          onStateChange: (e) => {

            if (!e.isVisible) {

              this.customPopup = false

            }

          }

        })

    }.margin(20)



  }

}

更多关于HarmonyOS 鸿蒙Next 组件.bindPopup属性使用问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS 鸿蒙Next组件中的.bindPopup属性主要用于绑定弹窗组件,以便在特定事件触发时显示相应的弹窗内容。这个属性通常用于页面布局中的组件,以实现用户交互的即时反馈。

使用.bindPopup属性时,你需要确保已正确引入并配置了弹窗组件。这通常涉及在XML布局文件中定义弹窗内容,并通过.bindPopup将其与触发弹窗的组件绑定。绑定过程涉及设置弹窗的ID和触发条件,例如点击事件。

当触发条件满足时,系统会根据.bindPopup属性中指定的ID找到对应的弹窗组件,并将其显示出来。在鸿蒙系统中,这个过程是自动处理的,你不需要编写额外的代码来控制弹窗的显示和隐藏。

需要注意的是,.bindPopup属性支持的弹窗类型可能因鸿蒙系统版本和组件库的不同而有所差异。因此,在使用前,请查阅当前版本的鸿蒙开发文档,确保你的用法符合系统要求。

如果在使用.bindPopup属性时遇到问题,例如弹窗不显示或显示异常,首先应检查弹窗组件的定义和绑定是否正确,以及触发条件是否满足。同时,确认鸿蒙系统版本和组件库版本是否兼容。

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

回到顶部