方案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
