鸿蒙自定义弹出框响应式更新数据

1.原因：

openCustomDialog不支持自定义组件使用@Reusable、@Link、@Provide、@Consume等装饰器，来同步弹出框弹出的页面与ComponentContent中自定义组件的状态

2.解决

class Params { // 要调用@Component里面的方法需要使用参数接收onClose?: () => void; // 关闭弹窗方法selStockroom?: (index:number) => void; // 选择方法stockroomList: IPartsStockItem[]; // 数据传入constructor(onClose?: () => void, stockroomList?: IPartsStockItem[], selStockroom?: (index:number) => void) { // 通过constructor接收this.onClose = onClose;this.stockroomList = stockroomList || [];this.selStockroom = selStockroom}
}@Builder
function shareDialog(params: Params) { // 弹框主体Column() {Row() {Text('请选择仓库').fontColor('#333').fontSize(fts('33lpx')).margin({ bottom: '40lpx' })}.width('100%').justifyContent(FlexAlign.Center)Column() {ForEach(params.stockroomList, (item: IPartsStockItem, i: number) => {Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {Text(item.name).fontSize(fts("32lpx"))if (item.selected) {Image($rawfile("icon/fukuanzhong_ico_select.png")).width("32lpx").height("32lpx")} else {Image($rawfile("icon/fukuanzhong_ico_noselect.png")).width("32lpx").height("32lpx")}}.onClick(() => {params.selStockroom?.(i) // 通过params调用@Component方法}).margin({ bottom: "24lpx" })})}}.backgroundColor('#FFFFFF').width('70%').padding('60lpx').borderRadius('20lpx')
}

@Component
export struct PartsCollection {
　　controller: SearchController = new SearchController();

　　@State stockroomList: IPartsStockItem[] = []

　　private contentNode: ComponentContent<Object> =
  　　new ComponentContent(this.ctx, wrapBuilder(shareDialog), new Params((): void => this.closeDialog(), this.stockroomList)) // 创建conetntNode，此时不可以传入异步数据，否则会是undefined
　　private options: promptAction.BaseDialogOptions = { alignment: DialogAlignment.Center, offset: { dx: 0, dy: 50 } } // 设置弹框显示位置

openDialog() {
  if (this.contentNode !== null) {
    // 确保传递正确的参数类型
    this.contentNode = new ComponentContent( 
      this.ctx,
      wrapBuilder(shareDialog),
      new Params((): void => this.closeDialog(), this.stockroomList, (index:number): void => this.selStockroom(index)) // 此时可以传入异步数据
    );
    this.ctx.getPromptAction()
      .openCustomDialog(this.contentNode, this.options)
      .then(() => {
        Log.info('OpenCustomDialog complete.')
      })
      .catch((error: BusinessError) => {
        let message = (error as BusinessError).message;
        let code = (error as BusinessError).code;
        Log.error(`OpenCustomDialog args error code is ${code}, message is ${message}`);
      })
  }
}

closeDialog() {
  if (this.contentNode !== null) {
    this.ctx.getPromptAction()
      .closeCustomDialog(this.contentNode)
      .then(() => {
        Log.info('closeCustomDialog complete.')
      })
      .catch((error: BusinessError) => {
        let message = (error as BusinessError).message;
        let code = (error as BusinessError).code;
        Log.error(`closeCustomDialog args error code is ${code}, message is ${message}`);
      })
  }
}

selStockroom(index: number) {
  const arr = [...this.stockroomList]
  for (let i = 0; i < arr.length; i++) {
    arr[i].selected = index == i;
  }
  this.stockroomList = arr // 修改了传入的数据
  if (this.contentNode) {
    this.contentNode.update( // 动态修改传入的数据，让数据更新达到响应式效果
      new Params(
        (): void => this.closeDialog(),
        this.stockroomList, // 传递已更新的列表
        (index: number): void => this.selStockroom(index)
      )
    );
  }
}

}