HarmonyOS @State状态量刷新、@Builder不会响应变化？

Question

@State curGridIndex: number = 0

@Builder
GridStyle(){
  Stack(){
    CrossGrid().visibility(this.curGridIndex === 1 ? Visibility.Visible : Visibility.None)
    DiagonalGrid().visibility(this.curGridIndex === 2 ? Visibility.Visible : Visibility.None)
    NineGrid().visibility(this.curGridIndex === 3 ? Visibility.Visible : Visibility.None)
  }
  .width(CommonConstants.FULL_SIZE)
  .height(CommonConstants.FULL_SIZE)
}

Row{
  //....
}.background(this.GridStyle())

当去改变状态量curGridIndex时，Builder内的UI并不会刷新。

Answer 1

参考示例代码：

@Preview
@Entry
@Component
export struct Demo {
  @State curGridIndex: number = 3

  @Builder
  GridStyle() {

    Stack() {
      Text(this.curGridIndex + '')
      CrossGrid().visibility(this.curGridIndex == 1 ? Visibility.Visible : Visibility.None)
      DiagonalGrid().visibility(this.curGridIndex === 2 ? Visibility.Visible : Visibility.None)
      NineGrid().visibility(this.curGridIndex === 3 ? Visibility.Visible : Visibility.None)

    }

    // .width('100%')
    // .height('100%')
  }

  build() {
    Row() {
      Text('呵呵:' + this.curGridIndex)
    }
    .width('100%')
    .height('100%')
    .background(this.curGridIndex == 0 ? null : this.GridStyle())

    .onClick(() => {
      this.curGridIndex += 1
      console.log('asdddd=', this.curGridIndex)
    })
  }
}

@Component
export struct CrossGrid {
  build() {
    RelativeContainer() {
      Divider()
        .vertical(true)
        .color(Color.White)
        .strokeWidth(1)
        .height('100%')
        .id('verticalLine')
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Top },
          bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
          left: { anchor: '__container__', align: HorizontalAlign.Start },
          right: { anchor: '__container__', align: HorizontalAlign.End }
        })
      Text('CrossGrid')
      Divider()
        .vertical(false)
        .color(Color.White)
        .strokeWidth(1)
        .width('100%')
        .id('horizontalLine')
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Top },
          bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
          left: { anchor: '__container__', align: HorizontalAlign.Start },
          right: { anchor: '__container__', align: HorizontalAlign.End }
        })
    }
    .width('100%')
    .height('100%')
  }
}

@Component
export struct DiagonalGrid {
  // private screenUtil = new ScreenUtil()
  build() {
    Stack() {
      Line()
        .width('100%')
        .height('100%')
        .stroke(Color.Green)
        .strokeWidth(1)
        .startPoint([0, 0])
        .endPoint([300, 300])
      Text('DiagonalGrid')
      Line()
        .width('100%')
        .height('100%')
        .stroke(Color.Green)
        .startPoint([0, 0])
        .endPoint([300, 300])

    }
    .width('100%')
    .height('100%')
  }
}

@Component
export struct NineGrid {
  //九宫格划分，数值无任何意义，仅取数组长度
  private nineGridArray = [1, 2, 3, 4, 5, 6, 7, 8, 9]

  build() {
    Grid() {
      ForEach(this.nineGridArray, (item: number) => {
        GridItem() {
          Rect()
            .width('100%')
            .height('100%')
            .stroke(Color.Green)
            .fillOpacity(0)
        }
      })
    }
    .columnsTemplate('1fr 1fr 1fr')
    .rowsTemplate('1fr 1fr 1fr')
    .width('100%')
    .height('100%')
  }
}