HarmonyOS 鸿蒙Next 自定义弹窗Dialog 数据绑定 功能

HarmonyOS 鸿蒙Next 自定义弹窗Dialog 数据绑定 功能 方案1 :（不是很优雅）：可以通过@link 将数据进行绑定

缺点： 弹窗的公用性 就差了点（如果公用的话，绑定的数据结构 有可能是 string list , number 大概就是这个意思）

步骤 1： 将 builder的布局 自定义组件 再通过 @link @state 搭配使用 效果是可以实现的

dialogController: CustomDialogController = new CustomDialogController({
    builder: DialogOperation({ list: $dialogItemList}),
    autoCancel: true,
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -20 },
    gridCount: 4,
    customStyle: false
})

自定义组件代码

import { DialogItem } from '../model/DialogItem';

@CustomDialog
export struct DialogOperation {
  controller: CustomDialogController

  @Link list: Array<DialogItem>

  build() {
    Column() {
      List({ space: 1, initialIndex: 0 }) {
        ForEach(this.list, (item: DialogItem) => {
          ListItem() {
            Column() {
              Text(item.name)
                .fontSize(16)

            }
            .width('100%')
            .height(56)
            .justifyContent(FlexAlign.Center)
            .alignItems(HorizontalAlign.Center)
            .onClick(() => {
              this.controller.close()
            })
          }
        })
      }
      .width('100%')

    }
  }
}

方案2: 通过添加 callback 将数据回调出来，再进行绑定 ， 这样我们就不用跟dialog 强绑定了。

步骤1. 在自定义组件 新增回调方法，直接看代码

import { DialogItem } from '../model/DialogItem';

@CustomDialog
export struct DialogOperation {
  controller: CustomDialogController
  onItemClick: (item: DialogItem) => void
  @Link list: Array<DialogItem>

  build() {
    Column() {
      List({ space: 1, initialIndex: 0 }) {
        ForEach(this.list, (item: DialogItem) => {
          ListItem() {
            Column() {
              Text(item.name)
                .fontSize(16)

            }
            .width('100%')
            .height(56)
            .justifyContent(FlexAlign.Center)
            .alignItems(HorizontalAlign.Center)
            .onClick(() => {
              this.controller.close()
              this.onItemClick(item)
            })
          }
        })
      }
      .width('100%')

    }
  }
}

这里的 list的元素 我们用一个结构类包裹，不同数据 直接扔在 DialogItem 里面就好 ，大概代码 如下

export class DialogItem {
  constructor(name, data) {
    this.name = name
    this.data = data
  }

  name: string
  data?: {
    [key: string]: any;
  }
  
}

步骤 2 ： 在主页里 接受回调回来的数据，再渲染到ui界面上。大致如下

dialogController: CustomDialogController = new CustomDialogController({
    builder: DialogOperation({ list: $dialogItemList,
      onItemClick: es=>{ this.item.dialogItem=es} }),
    autoCancel: true,
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -20 },
    gridCount: 4,
    customStyle: false
})

通过 onItemClick 回调 返回 es数据， 再绑定到ui上， 这里需要注意

不要将onItemClick方法，直接在里面写 es=>{绑定逻辑} 单独抽离出去，抽离出去绑定就失效了，具体原因 大概就是 this发生变化。不是主页的this引用了

记录一下 遇到的问题，如有错误，欢迎纠正 -------by Sandsboy