OpenHarmony开发者论坛

标题: 页面中数据动态刷新问题 [打印本页]

---

作者: pony    时间: 2023-11-18 15:11
标题: 页面中数据动态刷新问题
[md]### 【问题描述】

1. 水果排序的一个简单页面,点击刷新按钮进行数据刷新,数据是静态数据
2.

```
@Component
export struct ListItemComponent {

  index: string;
  name: string;
  vote: string;

  build() {
    Row() {
      if (parseInt(this.index) <= 3) {
        Column() {
          Row() {
            Text(this.index).fontSize(16).fontWeight(FontWeight.Bold).fontColor(Color.White)
          }
          .width(24)
          .height(24)
          .backgroundColor(Color.Blue)
          .borderRadius(18)
          .justifyContent(FlexAlign.Center)
        }.width('30%').alignItems(HorizontalAlign.Start)

      } else {
        Column() {
          Text(this.index).fontSize(16).width(24).fontWeight(FontWeight.Bold)
            .textAlign(TextAlign.Center)
        }.width('30%').alignItems(HorizontalAlign.Start)
      }
      Text(this.name).fontSize(16).fontWeight(FontWeight.Bold).width('50%')
      Text(this.vote).fontSize(16).fontWeight(FontWeight.Bold).width('20%')
    }
  }
}
```

```
import { Fruit, rankData1, rankData2 } from "../module/DataModele"
import { TitleComponent } from '../view/TitleComponent'
import { ListHeaderComponent } from '../view/ListHeaderComponent'
import { ListItemComponent } from '../view/ListItemComponent'

@Entry
@Component
struct Index {
  data1: Array<Fruit> = rankData1
  data2: Array<Fruit> = rankData2
  @State isSwitchData: boolean = true

  build() {
    Column() {
      //标题头
      TitleComponent({ isSwitchData: $isSwitchData })
      //排行榜头
      ListHeaderComponent()
      //排行榜列表项
      this.RankList()

    }.width('100%').height('100%').backgroundColor('#f1f3f5')
  }


  @Builder RankList() {
    Column() {
      Row(){
        // 这里的标记是会随着点击变化的
        Text(this.isSwitchData + '')
      }
      List() {
        ForEach(this.isSwitchData ? this.data1 : this.data2, (item: Fruit) => {

          ListItem() {
            ListItemComponent({
              index: item.id,
              name: item.name,
              vote: item.vote
            })
          }.width('100%').height(47)
        })
      }
    }.width('90%').padding(15).backgroundColor(Color.White).borderRadius(18)
  }
}
```

3. 
4. 尝试过将静态数组一起传入子组件,并为生效
5. 期待通过点击刷新按钮,页面数据渲染更换静态数据源

### 【运行环境】

硬件：
ROM版本：MAC 12.6.8
DevEvoStudio版本： 4.0 Release
SDK版本：3.1.0

[/md]

---

作者: 马迪    时间: 2023-11-18 20:09
[md]这个好像就是课程里的demo吧，有啥问题吗？
是不是在刷新图标的按钮初，处理一个click事件，把`isSwitchData `取反，就可以更换数据源了？

[/md]

---

欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/)

Powered by Discuz! X3.5