HarmonyOS @State修饰的Array<Object>修改对象的属性,单个item的页面数据没刷新。

页面上有一个列表,列表通过ForEach循环展示。但是我这边修改对象中的一个boolean值时。页面不进行刷新。实例代码:

@Page({ name: 'drum_page' })
@Entry
@Component
export struct DrumMachinePage {
  @State text: string = ''
  @State eventType: string = ''
  @State gjBeans: GjBean[] = []
  @State gjBean: GjBean | null = null
  @State rightCurrentIndex: number = 0;
  @State generalViewModel: GeneralViewModel = GeneralViewModel.getInstance()

  aboutToAppear(): void {
    this.gjBeans = GjBean.getGjBean()
    this.gjBean = this.gjBeans[0]
    this.gjBean.isLeftSelected = true
  }

  build() {
    Column() {
      headTitle({
        title: '鼓机',
        titleColor: '#ffffff',
        backButton: $r('app.media.icon_back_white'),
        backGroundColor: '#00000000'
      })

      Row() {
        Column() {
          List() {
            ForEach(this.gjBeans, (item: GjBean, index: number) => {
              ListItem() {
                Row() {
                  Text(item.name)
                    .fontSize('14fp')
                    .fontWeight(FontWeight.Bold)
                    .margin({ left: '10vp' })
                    .fontColor(item.isLeftSelected ? Color.White : '#333333')
                  Image($r('app.media.icon_enter_more_white')).size({ width: '18vp', height: '18vp' })
                    .visibility(item.isLeftSelected ? Visibility.Visible : Visibility.Hidden)

                }
                .size({ width: '153vp', height: '39vp' })
                .borderRadius(item.isLeftSelected ? '8vp' : '0vp')
                .backgroundColor(item.isLeftSelected ? '#3B97FB' : Color.White)
                .alignItems(VerticalAlign.Center)
                .justifyContent(FlexAlign.SpaceBetween)
                .margin({ top: '6vp' })
                .onClick(() => {
                  // this.leftCurrentIndex = index
                  this.gjBeans.forEach((item1: GjBean) => {
                    item1.isLeftSelected = false
                  })
                  item.isLeftSelected = !item.isLeftSelected
                  logger.debug(`item数据发生改变${item.isLeftSelected}--->列表数据发生改变?-->` + this.gjBeans[index]
                    .isLeftSelected)
                  this.gjBean = item
                })
              }
            })
          }
          .alignListItem(ListItemAlign.Center)
          .listDirection(Axis.Vertical)
          .scrollBar(BarState.Off)
          .size({ width: CommonConstants.FULL_PERCENT, height: CommonConstants.FULL_PERCENT })
        }.size({ height: CommonConstants.FULL_PERCENT }).layoutWeight(1).backgroundColor(Color.White).borderRadius(8)
        Column() {
          List() {
            ForEach(this.gjBean?.mGjRightName, (item: GiRightName, index: number) => {
              ListItem() {
                Row() {
                  Text(this.generalViewModel.getDisplayName((this.gjBean && this.gjBean != undefined) ? this.gjBean?.musicName : [], index, item.music))
                    .fontSize('14fp')
                    .fontWeight(FontWeight.Bold)
                    .margin({ left: '10vp' })
                    .fontColor(this.rightCurrentIndex == index ? '#333333' : Color.White)
                    .maxLines(1)
                    .layoutWeight(1)
                    .textOverflow({ overflow: TextOverflow.Ellipsis })
                  Image($r('app.media.icon_drum_vip')).size({ width: '18vp', height: '14vp' })
                    .objectFit(ImageFit.Contain)
                    .margin({ right: '6vp' })
                    .visibility(index == 0 || index == 1 ? Visibility.Hidden : Visibility.Visible)
                }
                .size({ width: '153vp', height: '39vp' })
                .borderRadius(this.rightCurrentIndex == index ? '8vp' : '0vp')
                .backgroundColor(this.rightCurrentIndex == index ? Color.White : Color.Transparent)
                .alignItems(VerticalAlign.Center)
                .justifyContent(FlexAlign.SpaceBetween)
                .margin({ top: '6vp' })
                .onClick(() => {
                  this.rightCurrentIndex = index
                })
              }
            })
          }
          .alignListItem(ListItemAlign.Center)
          .listDirection(Axis.Vertical)
          .scrollBar(BarState.Off)
          .size({ width: CommonConstants.FULL_PERCENT, height: CommonConstants.FULL_PERCENT })
        }
        .size({ height: CommonConstants.FULL_PERCENT })
        .layoutWeight(1)
        .borderRadius(8)
        .borderWidth(1)
        .margin({ left: '7vp' })
        .borderColor('#66ffffff')
        .backgroundColor(Color.Transparent)
      }.size({ width: CommonConstants.FULL_PERCENT, height: '279vp' }).justifyContent(FlexAlign.Center)
      .padding({ left: '10vp', right: '10vp' })
      .margin({ top: '18vp' })
    }.linearGradient({
      direction: GradientDirection.Bottom, // 渐变方向
      repeating: false, // 渐变颜色是否重复
      colors: [[0xff003E82, 0.1], [0xff0E1843, 1.0], [0xff0E1843, 1.0]]
    }).size({ width: CommonConstants.FULL_PERCENT, height: CommonConstants.FULL_PERCENT })
  }

  export class GjBean {
  mGjRightName: GiRightName[] = []
  name: string = ''
  musicName: string[] = []
  isLeftSelected: boolean = false
  constructor(name: string, mGjRightName: GiRightName[], musicName: string[]) {
    this.mGjRightName = mGjRightName
    this.name = name
    this.musicName = musicName
  }

  public static getGjBean(): GjBean[] {
    let var1: GjBean[] = []
    var1.push(new GjBean("Pop", GjBean.getGjRightList(["Pop 1", "Pop 2", "Pop 3", "Pop 4", "Pop 5", "Pop 6", "Pop 7", "Pop 8", "Pop 9", "Pop 10", "Pop 11", "Pop 12", "Pop 13", "Pop 14", "Pop 15", "Pop 16", "Pop 17", "Pop 18", "Pop 19", "Pop 20", "Pop 21", "Pop 22", "Pop 23", "Pop 24", "Pop 25", "Pop 26", "Pop 27", "Pop 28", "Pop 29", "Pop 30", "Pop 31", "Pop 32", "Pop 33", "Pop 34", "Pop 35", "Pop 36", "Pop 37", "Pop 38", "Pop 39", "Pop 40", "Pop 41", "Pop 42", "Pop 43", "Pop 44", "Pop 45", "Pop 46", "Pop 47", "Pop 48"]), ["pop1-90.mp3", "pop2-90.mp3", "pop3-90.mp3", "pop4-90.mp3", "pop5-90.mp3", "pop6-70.mp3", "pop7-70.mp3", "pop8-70.mp3", "pop9-70.mp3", "pop10-70.mp3", "pop11-70.mp3", "pop12-70.mp3", "pop13-64.mp3", "pop14-64.mp3", "pop15-87.mp3", "pop16-78.mp3", "pop17-79.mp3", "pop18-80.mp3", "pop19-74.mp3", "pop20-92.mp3", "pop21-72.mp3", "pop22-109.mp3", "pop23-130.mp3", "pop24-129.mp3", "pop25-86.mp3", "pop26-84.mp3", "pop27-86.mp3", "pop28-69.mp3", "pop29-93.mp3", "pop30-90.mp3", "pop31-74.mp3", "pop32-91.mp3", "pop33-84.mp3", "pop34-64.mp3", "pop35-97.mp3", "pop36-72.mp3", "pop37-65.mp3", "pop38-65.mp3", "pop39-65.mp3", "pop40-65.mp3", "pop41-155.mp3", "pop42-155.mp3", "pop43-155.mp3", "pop44-100.mp3", "pop45-89.mp3", "pop46-89.mp3", "pop47-150.mp3", "pop48-150.mp3"]));
    var1.push(new GjBean("Disco", GjBean.getGjRightList(["Disco 1", "Disco 2", "Disco 3", "Disco 4", "Disco 5", "Disco 6", "Disco 7", "Disco 8", "Disco 9", "Disco 10", "Disco 11", "Disco 12", "Disco 13", "Disco 14", "Disco 15", "Disco 16", "Disco 17", "Disco 18", "Disco 19", "Disco 20", "Disco 21", "Disco 22", "Disco 23", "Disco 24", "Disco 25", "Disco 26", "Disco 27", "Disco 28", "Disco 29", "Disco 30", "Disco 31"]), ["disco1-120.mp3", "disco2-119.mp3", "disco3-104.mp3", "disco4-133.mp3", "disco5-124.mp3", "disco6-129.mp3", "disco7-128.mp3", "disco8-118.mp3", "disco9-107.mp3", "disco10-137.mp3", "disco11-128.mp3", "disco12-132.mp3", "disco13-182.mp3", "disco14-130.mp3", "disco15-110.mp3", "disco16-142.mp3", "disco17-108.mp3", "disco18-120.mp3", "disco19-133.mp3", "disco20-133.mp3", "disco21-108.mp3", "disco22-117.mp3", "disco23-117.mp3", "disco24-123.mp3", "disco25-119.mp3", "disco26-119.mp3", "disco27-119.mp3", "disco28-125.mp3", "disco29-125.mp3", "disco30-132.mp3", "disco31-132.mp3"]));
    var1.push(new GjBean("Funk", GjBean.getGjRightList(["Funk 1", "Funk 2", "Funk 3", "Funk 4", "Funk 5", "Funk 6", "Funk 7", "Funk 8", "Funk 9", "Funk 10", "Funk 11", "Funk 12", "Funk 13", "Funk 14", "Funk 15", "Funk 16", "Funk 17", "Funk 18", "Funk 19", "Funk 20", "Funk 21", "Funk 22"
HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

这是因为State观察不到更深层次的变化(本例中观察不到数组元素是对象且对象属性变化,但是@State仅能观察到数组元素变化而观察不到数组元素属性的变化。对此可以使用@Observed装饰器和@ObjectLink装饰器进行修改。

@State参考:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-state-V5

@Observed装饰器和@ObjectLink参考:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-observed-and-objectlink-V5

分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS @State可以修饰对象数组
41浏览 • 1回复 待解决
修改ForEach使用数据对象,UI不刷新
1880浏览 • 1回复 待解决
HarmonyOS @state可以修饰对象数组么
45浏览 • 1回复 待解决
@State 修饰变量值改变,界面不刷新
1606浏览 • 1回复 待解决
@BuilderParam修饰属性报错
1783浏览 • 1回复 待解决
HarmonyOS 动态object对象问题
62浏览 • 1回复 待解决