上一简单封装了CustomDialog 以及封装了弹窗自定义组件
这一次二次封装一个弹出带固定title和关闭按钮的弹出框, 这个场景是根据当前需求, 实际需求中,这里是选择城市和选择经销商列表之类的弹窗组件
此类弹窗需要禁止Mask点击关闭, 选择数据后关闭

创建BuiPopupIncludeTitle 并申明接口 ,预留给外部处理

export interface BuiPopupIncludeTitleController extends BuiPopupController { //继承接口包含open和close
  onClose: () => void //点击关闭按钮时的事件,外部传入
}

弹窗包含内容,即slot为外部写入,所以此控件本身并不去关注选择谁, 什么时候打开,关闭,由外部控制, 完整组件代码 

import BuiPopup, { BuiPopupController } from './BuiPopupBase'

export interface BuiPopupIncludeTitleController extends BuiPopupController {
  onClose: () => void
}

@Builder
function empty() {
}

/**
 * 带有标题的pop 有close的
 * 内置的slot 可以放 BuiPage 和BuiPaging 以及其他任意组件
 *
 */
@Component
export default struct BuiPopupIncludeTitle {
  controller: BuiPopupIncludeTitleController = {} as BuiPopupIncludeTitleController
  @State title: string = ""
  @BuilderParam slot: () => void = empty

  build() {
    Column() {
      this.buildContent();
    }
  }

  @Builder
  buildContent() {
    BuiPopup({
      clickMaskClose: false, //禁止点击mask关闭
      controller: this.controller,
      slot: () => {
        this.buildInnerSlot();
      }
    })
  }

  @Builder
  buildInnerSlot() {

    Column() {
      this.slot_title();
      Divider().width('100%').strokeWidth(1).color('#E5E5E5')
      Column() {
        this.slot()
      }.width('100%')
    }.backgroundColor("white").width("100%")
    .borderRadius({
      topLeft: 16,
      topRight: 16
    })

  }

  @Builder
  slot_title() {
    Row() {
      Column() {
        Text(this.title).padding({ left: 60 })
      }.layoutWeight(1)

      Column() {
        Image($r("app.media.close"))
          .interpolation(ImageInterpolation.Low)
          .rotate({ angle: 180 })
          .width(24)
          .height(24)

      }
      .width(60)
      .align(Alignment.Center)
      .height(56)
      .justifyContent(FlexAlign.Center)
      .onClick(() => {
        this.controller.close();
        this.controller.onClose && this.controller.onClose();
      })
    }.width('100%').alignItems(VerticalAlign.Center)
  }
}

调用方式:
 

import BuiPopupIncludeTitle, { BuiPopupIncludeTitleController } from '../bui/popup/BuiPopupIncludeTitle';

buiPopupIncludeTitleController:BuiPopupIncludeTitleController = {} as BuiPopupIncludeTitleController

Button("带title弹窗").onClick(() => {
  this.buiPopupIncludeTitleController.open();
});

BuiPopupIncludeTitle({
  title:"弹窗标题",
  controller: this.buiPopupIncludeTitleController,
  slot:()=>{
    this.buildPopContent(); //这里就是内容,可以是个可点击的列表,点击后,调用 this.buiPopupIncludeTitleController.close()
  }
})

本章代码地址: https://gitee.com/jifsu_167/open-harmony-demo