HarmonyOS 鸿蒙Next bindpopup(XX:boolean,{}) xx布尔值如何动态绑定求助

HarmonyOS 鸿蒙Next bindpopup(XX:boolean,{}) xx布尔值如何动态绑定求助

import alertDialog from './Six'
const handleSecondaryButtonClick = () => {
  console.log('Secondary button was clicked!');
  // 在这里执行你想要的操作
};

@Component
struct seven {
  @State numList:string[] = new Array(16).fill('1')
  @State numList1:string[] = new Array(16).fill({ id: '1', status: false })
  @State count: number = 1
  @State handlePopup: boolean = false

  onPageShow() {
  }
  // 局部自定义左滑删除组件
  @Builder btnDelGroup($: {
    value1: boolean,
    value2: number
  }) {
    ForEach(this.numList1,(item,index)=>{
      if(index==$.value2) {
        Row () {
          Button('取消').fontSize(10)
          Button('删除').fontSize(10).onClick(() => {
            console.info('ccc=',index)
            this.handlePopup = !this.handlePopup
            this.handlePopup = false
          })
            .bindPopup($.value1, {
              message: 'this is a popup',
              placementOnTop: true,
              showInSubWindow: false,
              primaryButton: {
                value: '确定',
                action: () => {
                  this.handlePopup = !this.handlePopup
                }
              },
              secondaryButton: {
                value: '取消',
                action: () => {
                  this.handlePopup = !this.handlePopup
                }
              },
              // 弹窗状态变化事件回调，参数为弹窗当前的显示状态。
              onStateChange: (e) => {
                if (!e.isVisible) {
                  this.handlePopup = false
                }
              }
            })
        }
      }
    })

  }

  build() {
    // 勿删 重点记忆，调用通用弹窗方法，获取点击ok的回调，同理也可获取cancel的回调！！！
    // Text('测试弹窗')
    //   .onClick(()=>{
    //     alertDialog(5,handleSecondaryButtonClick)
    //   })
    Column({ space: 10 }) {
      Text('Grid布局测试')
      // Grid布局不同于flex布局，不可在Grid()内书写type或者其他属性
      Grid () {
        // 合并格子需要单独写一个GridItem 不要写在循环内 如下
        GridItem () {
          Text('合并').fontColor('#fff')
        }
        .rowStart(0)
        .rowEnd(0)
        .columnStart(0)
        .columnEnd(1)
        .backgroundColor('#ff1f13bf')

        GridItem () {
          Text('我是合并的格子').fontColor('#fff')
        }
        .rowStart(1)
        .rowEnd(2)
        .columnStart(1)
        .columnEnd(2)
        .backgroundColor('#ff66ecec')

        GridItem () {
          Text('第三个合并的盒子').fontSize(12).fontColor('#ffe5db1f')
        }
        .backgroundColor('#ff3dc62e')
        .rowStart(2)
        .rowEnd(3)
        .columnStart(0)
        .columnEnd(0)

        GridItem () {
          Text('第四个合并的盒子').fontSize(12).fontColor('#ffe5db1f')
        }
        .backgroundColor('#ffb808cb')
        .rowStart(3)
        .rowEnd(3)
        .columnStart(2)
        .columnEnd(3)

        GridItem () {
          Text('第四个合并的盒子').fontSize(12).fontColor('#ffe5db1f')
        }
        .backgroundColor('#fffd2267')
        .rowStart(0)
        .rowEnd(1)
        .columnStart(3)
        .columnEnd(3)

        ForEach(this.numList, (item: string, index: number) => {
          // 测试GridItem写属性
          GridItem () {
            Text(`盒子${this.count}`)
          }.border({ width: 1, color: '#000000' })
        }, item)
      }
      .width('100%')
      .height(300)
      .border({ width: 1, color: '#ff0000' })
      .rowsTemplate('1fr 1fr 1fr 1fr')
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .rowsGap(10)
      .columnsGap(10)

      Divider().color('#ff0000').strokeWidth(1).lineCap(LineCapStyle.Round)
      // list组件包含listItem和listGroupItem子组件
      Text('List列表组件')
      Divider()
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.numList1, (item, index) => {
          ListItem () {
            Text('list'+index+item.id)
              .width('100%')
              .textAlign(TextAlign.Center)
              .flexShrink(0)
              .border({ width: 1, color: '#ff87eaa8' })
              .height(40)
              .borderRadius(8)
          }
          .swipeAction({ end: this.btnDelGroup({ value1: item.status, value2: index }) }).width('100%')
        }, item)
      }.scrollBar(BarState.Auto).height(300)

      Divider()
    }.width('100%').padding(10).alignItems(HorizontalAlign.Start)
}