HarmonyOS 数组对象数据刷新

Array数组中对象中的属性发生变化,界面未刷新

HarmonyOS
2024-12-25 11:41:31
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
shlp

示例参考如下

@Observed
class Task {
  static id: number = 1
  name: string = `任务${Task.id++}`
  finished: boolean = false
}

class StatInfo {
  totalTask: number = 0
  finishTask: number = 0
}

@Styles
function card() {
  .width('95%')
  .padding(20)
  .backgroundColor(Color.White)
  .borderRadius(15)
  .shadow({ radius: 6, color: '#1F000000', offsetX: 2, offsetY: 4 })

}

@Extend(Text)
function finishTask() {
  .decoration({ type: TextDecorationType.LineThrough, color: '#B1B2B1' })
  .fontColor('#B1B2B1')

}


@Component
struct TaskStatistics {
  @Consume stat: StatInfo

  build() {
    Row() {
      Text('任务:')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)

      Stack() {
        Progress({
          value: this.stat.finishTask,
          total: this.stat.totalTask,
          type: ProgressType.Ring
        })
          .width(100)
        Row() {
          Text(this.stat.finishTask.toString())
            .fontSize(24)
            .fontColor('#36D')
          Text(' / ' + this.stat.totalTask.toString())
            .fontSize(24)
        }
      }
    }
    .card()
    .margin({ top: 5, bottom: 10 })
    .justifyContent(FlexAlign.SpaceEvenly)

  }
}

@Component
struct TaskList {
  @Consume stat: StatInfo
  @State tasks: Task[] = []
  handleTaskChange: (res: string) => void = (res) => {
    console.log(res)
    this.stat.totalTask = this.tasks.length
    this.stat.finishTask = this.tasks.filter(item => item.finished).length
  }

  build() {
    Column() {
      Button('新增')
        .width(200)
        .margin({ bottom: 10 })
        .onClick(() => {
          this.tasks.push(new Task())
          this.handleTaskChange('2')
        })

      List({ space: 10 }) {
        ForEach(this.tasks, (task: Task, index) => {
          ListItem() {
            TaskListItem({ item: task, onTaskChange: this.handleTaskChange })
          }
          .swipeAction({ end: this.DeleteButton(index) })
        })
      }
    }
  }

  @Builder
  DeleteButton(index: number) {

    Button() {
      Image('')
        .backgroundColor(Color.Red)
        .width(20)
        .aspectRatio(1)
    }
    .width(40)
    .height(40)
    .type(ButtonType.Circle)
    .backgroundColor(Color.Red)
    .margin(5)
    .onClick(() => {
      this.tasks.splice(index,1)
      this.handleTaskChange('删除')
    })

  }
}


@Component
struct TaskListItem {
  @ObjectLink item: Task
  onTaskChange: (e: string) => void = () => {
  }

  build() {
    Row() {
      if (this.item.finished) {
        Text(this.item.name)
          .finishTask()
      } else {
        Text(this.item.name)
      }

      Checkbox()
        .shape(CheckBoxShape.ROUNDED_SQUARE)
        .select(this.item.finished)
        .onChange((val) => {
          this.item.finished = val
          this.onTaskChange(val? '选中':'未选中')
        })
    }
    .card()
    .justifyContent(FlexAlign.SpaceBetween)
  }
}

@Entry
@Component
struct TaskListPage {
  @Provide stat: StatInfo = new StatInfo()

  build() {

    Column({ space: 10 }) {
      Text('列表')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .width('100%')
        .height(56)
        .padding({left:20})

      TaskStatistics()

      TaskList()
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F2F3')
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.
  • 112.
  • 113.
  • 114.
  • 115.
  • 116.
  • 117.
  • 118.
  • 119.
  • 120.
  • 121.
  • 122.
  • 123.
  • 124.
  • 125.
  • 126.
  • 127.
  • 128.
  • 129.
  • 130.
  • 131.
  • 132.
  • 133.
  • 134.
  • 135.
  • 136.
  • 137.
  • 138.
  • 139.
  • 140.
  • 141.
  • 142.
  • 143.
  • 144.
  • 145.
  • 146.
  • 147.
  • 148.
  • 149.
  • 150.
  • 151.
  • 152.
  • 153.
  • 154.
  • 155.
  • 156.
  • 157.
  • 158.
  • 159.
  • 160.
  • 161.
  • 162.
  • 163.
  • 164.
  • 165.
  • 166.
  • 167.
  • 168.
  • 169.
分享
微博
QQ
微信
回复
2024-12-25 14:43:22
相关问题
HarmonyOS 数组对象的排序
553浏览 • 1回复 待解决
HarmonyOS @State可以修饰对象数组
350浏览 • 1回复 待解决
修改ForEach使用的数据对象,UI不刷新
2366浏览 • 1回复 待解决
HarmonyOS 对象数组排序问题
457浏览 • 1回复 待解决
HarmonyOS @state可以修饰对象数组
337浏览 • 1回复 待解决
HarmonyOS 二维数组刷新问题
736浏览 • 1回复 待解决
ForEach数组发生改变。UI没刷新
1226浏览 • 1回复 待解决
class二次刷新渲染数组
1182浏览 • 1回复 待解决
如何监听数组对象属性变化
2764浏览 • 1回复 待解决
数组中元素变更如何触发刷新list?
581浏览 • 1回复 待解决