鸿蒙开发 气泡弹框

效果

组件封装代码

import { AbcConvertUtils } from '@abc/common/src/main/ets/utils/AbcConvertUtils';

export interface MineMorePopupItem {
  icon: Resource;
  text: string;
  id: number;
}

export enum MineMorePopupItemId {
  MESSAGE,
  CUSTOMERSERVER,
  VERSION,
}

export const MineMorePopupList: MineMorePopupItem[] = [
  {
    icon: $r('app.media.title_message_black'),
    text: "消息",
    id: MineMorePopupItemId.MESSAGE
  },
  {
    icon: $r('app.media.title_services_black'),
    text: "客服",
    id: MineMorePopupItemId.CUSTOMERSERVER
  },
  {
    icon: $r('app.media.title_switch_black'),
    text: "版本",
    id: MineMorePopupItemId.VERSION
  },
]

@Component
export struct MineMorePopup {
  private popupComponentList: MineMorePopupItem[] = [];
  private iconWidth: string | number | Resource = AbcConvertUtils.adaptHeight("common_title_iamge_width_and_height");
  private textSize: string | number = AbcConvertUtils.adaptHeight("font_size_30");
  private textColor: ResourceColor = $r("app.color.black_333333");
  private click?: Function = (id: MineMorePopupItemId) => {
  }
  @Prop unReadNum: number;

  build() {
    Column() {
      ForEach(this.popupComponentList, (item: MineMorePopupItem, index: number) => {
        Row() {
          if (item.id == MineMorePopupItemId.MESSAGE) {
            Badge({
              count: this.unReadNum,
              maxCount: 99,
              position: BadgePosition.RightTop, // 设置 badge 显示在右上角
              style: {
                badgeColor: Color.Red,
              }   // 设置 badge 的显示样式
            }) {
              Image(item.icon)
                .width(this.iconWidth)
                .height(this.iconWidth)
            }
            .size({
              width: this.iconWidth,
              height: this.iconWidth
            })
          } else {
            Image(item.icon)
              .width(this.iconWidth)
              .height(this.iconWidth)
          }
          Row().width(10)
          Text(item.text)
            .fontColor(this.textColor)
            .fontSize(this.textSize)
            .fontWeight(FontWeight.Normal)
            .textAlign(TextAlign.Start)
        }
        .width("100%")
        .backgroundColor(Color.White)
        .height(AbcConvertUtils.adaptHeight("mine_more_popup_item_height"))
        .padding({
          left: AbcConvertUtils.adaptWidth("mine_more_popup_padding_left_right"),
          right: AbcConvertUtils.adaptWidth("mine_more_popup_padding_left_right")
        })
        .justifyContent(FlexAlign.Start)
        .alignItems(VerticalAlign.Center)
        .onClick(() => {
          this.click?.(item.id);
        })

        if (index != this.popupComponentList.length - 1) {
          Divider()
            .padding({
              left: AbcConvertUtils.adaptWidth("mine_more_popup_padding_left_right"),
              right: AbcConvertUtils.adaptWidth("mine_more_popup_padding_left_right")
            })
            .color("#ccc")
            .backgroundColor(Color.Transparent)
        }
      })
    }
    .backgroundColor(Color.White)
  }
}

调用

@State isShowPopup: boolean = false 

Button()
.onClick(() => {
  this.isShowPopup = !this.isShowPopup;
})
.bindPopup(this.isShowPopup, {
  builder: this.popupBuilder,
  radius: AbcConvertUtils.adaptHeight("mine_more_popup_radius"),
  autoCancel: true,
  width: AbcConvertUtils.adaptWidth("mine_more_popup_width")
})



@Builder
popupBuilder() {
  MineMorePopup({

    popupComponentList: MineMorePopupList,
    textSize: AbcConvertUtils.adaptHeight("font_size_30"),
    textColor: $r("app.color.black_333333"),
    iconWidth: AbcConvertUtils.adaptHeight("common_title_iamge_width_and_height"),
    unReadNum: this.unReadNum,
    click: (id: MineMorePopupItemId) => {
      this.isShowPopup = false;
      if (id == MineMorePopupItemId.MESSAGE) {
        Logger.log('点击了更多 消息')
      }
      else if (id == MineMorePopupItemId.CUSTOMERSERVER) {
        Logger.log('点击了更多 客服')
      }
      else if (id == MineMorePopupItemId.VERSION) {
        Logger.log('点击了更多 版本')
      }
    }
  })
}