HarmonyOS 如何把Popup这里的配置逻辑尽可能封装起来方便调用,业务调用方还是要写不少重复代码

一个是控制显示隐藏的状态变量要求,第二个就是这个CustomBuilder需要在组件内定义导致。有什么方式能把这俩块封装起来,或者至少下面@Builder这个能封装起来,目前这里由于只能在调用位置的Component内写,相当于每处调用的都要写这么一个@Builder再包一次。

HarmonyOS
3天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

参考示例如下:

interface BubbleEvent {
  isVisible: boolean
}

interface BubbleOption {
  width?: Dimension /// 气泡宽度
  popupColor?: Color | string | Resource | number
  radius?: Dimension
  shadow?: ShadowOptions | ShadowStyle
  placement?: Placement /// 气泡组件优先显示的位置
  offset?: Position /// 气泡的位置偏移
  targetSpace?: Length
  backgroundBlurStyle?: BlurStyle
  enableArrow?: boolean
  arrowOffset?: Length /// popup箭头在弹窗处的偏移
  arrowPointPosition?: ArrowPointPosition /// 箭头位置
  arrowWidth?: Dimension /// 箭头宽度
  arrowHeight?: Dimension /// 箭头高度

  mask?: boolean
  maskColor?: ResourceColor
  autoCancel?: boolean
  showInSubWindow?: boolean
  focusable?: boolean
  onStateChange?: (event: BubbleEvent) => void
}

interface KSBubbleOptions {
  src?: string | PixelMap | Resource
  title?: string
  textArr?: string[]
  duration?: number
  option?: BubbleOption
}

class KSCustomBubbleOption {
  public option: CustomPopupOptions;

  /// 构造函数
  constructor(window: CustomComponent, bubbleOptions: KSBubbleOptions) {
    this.option = {
      builder: KSBubbleStyle.bind(window, (bubbleOptions.title || '这是标题文字'))
    }
    this.option.width = bubbleOptions.option ? bubbleOptions.option.width : undefined
    this.option.popupColor = bubbleOptions.option ? bubbleOptions.option.popupColor : "#FFFFFF"
    this.option.radius = bubbleOptions.option ? bubbleOptions.option.radius : 4
    this.option.shadow = bubbleOptions.option ? bubbleOptions.option.shadow : ShadowStyle.OUTER_DEFAULT_MD
    this.option.placement = bubbleOptions.option ? bubbleOptions.option.placement : undefined
    this.option.offset = bubbleOptions.option ? bubbleOptions.option.offset : undefined
    this.option.targetSpace = bubbleOptions.option ? bubbleOptions.option.targetSpace : undefined
    this.option.backgroundBlurStyle =
      bubbleOptions.option ? bubbleOptions.option.backgroundBlurStyle : BlurStyle.COMPONENT_ULTRA_THICK

    this.option.enableArrow = bubbleOptions.option ? bubbleOptions.option.enableArrow : true
    this.option.arrowOffset = bubbleOptions.option ? bubbleOptions.option.arrowOffset : undefined
    this.option.arrowPointPosition = bubbleOptions.option ? bubbleOptions.option.arrowPointPosition : undefined
    this.option.arrowWidth = bubbleOptions.option ? bubbleOptions.option.arrowWidth : undefined
    this.option.arrowHeight = bubbleOptions.option ? bubbleOptions.option.arrowHeight : undefined
    this.option.mask = bubbleOptions.option ? bubbleOptions.option.mask : false
    this.option.maskColor = bubbleOptions.option ? bubbleOptions.option.maskColor : '#08182431'

    this.option.autoCancel = bubbleOptions.option ? bubbleOptions.option.autoCancel : true
    this.option.showInSubWindow = bubbleOptions.option ? bubbleOptions.option.showInSubWindow : false
    this.option.focusable = bubbleOptions.option ? bubbleOptions.option.focusable : true
    this.option.onStateChange = bubbleOptions.option ? bubbleOptions.option.onStateChange : undefined
  }
}

@Builder
export function KSBubbleStyle(title: string) {
  Column() {
    Text(title)
  }
}

@Component
export struct TextBubbleBuilder {
  @State status: boolean = false
  title: string = ''
  message: string = ''
  options: KSCustomBubbleOption = new KSCustomBubbleOption(this, {})

  build() {
    Flex({ direction: FlexDirection.Column }) {
      Text(this.title).fontSize(16).fontColor(Color.White).margin({ left: 10, top: 5, bottom: 5 })
      Text(this.message).fontSize(14).fontColor(Color.Gray).margin({ left: 10, bottom: 10 })
      Button('点我弹出')
        .size({ width: '90%', height: 36 })
        .fontColor(Color.White)
        .backgroundColor(Color.Blue)
        .margin({ left: 16 })
        .onClick(() => {
          this.status = !this.status
          if (this.status) {
            setTimeout(() => {
              this.status = false
            }, 2000)
          }
        })
        .bindPopup(this.status, this.options.option)
    }.width('85%').height('15%').margin({ top: 5, bottom: 5 }).backgroundColor(Color.Gray)
  }
}

@Entry
@Component
struct BubbleExample {
  @State status: boolean = false
  build() {
    Column() {
      TextBubbleBuilder({
        title: '文本气泡',
        message: '短文本',
        status: this.status,
        options: new KSCustomBubbleOption(this, { title: '记录世界我记录你记录世界我记录你' })
      })
    }
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS 如何实现调用起来软键盘
121浏览 • 1回复 待解决
HarmonyOS 如何调用js代码
182浏览 • 1回复 待解决
HarmonyOS TS文件如何调用ArkTS代码
358浏览 • 1回复 待解决
MySQL重复逻辑处理?
2602浏览 • 1回复 待解决
HarmonyOS hsp调用har代码
386浏览 • 1回复 待解决
HarmonyOS 关于自定义弹窗封装调用
592浏览 • 2回复 待解决
HarmonyOS如何调用提供js文件
806浏览 • 1回复 待解决