鸿蒙官网案例-RankingDemo头部解析-3

功能点：

1. 列表显示，并实现点击事件，点击改变字体颜色

2. 点击右上角刷新按钮，通过@link更新数据，并将数据显示在页面上

   
   33.gif

import appContext from '@ohos.app.ability.common'
import prompt from '@ohos.promptAction';
import { RankData } from '../viewModel/RankData'

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  private clickBackTimeRecord: number = 0;
  @State rankData1: RankData[] = [
    new RankData('1', $r('app.string.fruit_apple'), '12080'),
    new RankData('2', $r('app.string.fruit_grapes'), '10320'),
    new RankData('3', $r('app.string.fruit_watermelon'), '9801'),
    new RankData('4', $r('app.string.fruit_banana'), '8431'),
    new RankData('5', $r('app.string.fruit_pineapple'), '7546'),
    new RankData('6', $r('app.string.fruit_durian'), '7431'),
    new RankData('7', $r('app.string.fruit_red_grape'), '7187'),
    new RankData('8', $r('app.string.fruit_pears'), '7003'),
    new RankData('9', $r('app.string.fruit_carambola'), '6794'),
    new RankData('10', $r('app.string.fruit_guava'), '6721')
  ];
  @State rankData2: RankData[] = [
    new RankData('11', $r('app.string.fruit_watermelon'), '8836'),
    new RankData('12', $r('app.string.fruit_apple'), '8521'),
    new RankData('13', $r('app.string.fruit_banana'), '8431'),
    new RankData('14', $r('app.string.fruit_grapes'), '7909'),
    new RankData('15', $r('app.string.fruit_red_grape'), '7547'),
    new RankData('16', $r('app.string.fruit_pears'), '7433'),
    new RankData('17', $r('app.string.fruit_pineapple'), '7186'),
    new RankData('18', $r('app.string.fruit_durian'), '7023'),
    new RankData('19', $r('app.string.fruit_guava'), '6794'),
    new RankData('20', $r('app.string.fruit_carambola'), '6721')
  ];
  @State isRefreshData: boolean = false

  build() {
      Column() {
        TitleComponent({ isRefreshData: $isRefreshData })
        TitleHeaderComponent({
          paddingValue: {
            left: 15,
            right: 15
          },
          widthValue: '90%'
        })
          .margin({ top: 20, bottom: 15 })
        this.RankList()
      }
      .width('100%')
      .height('100%')
    .backgroundColor('#F1f3f5')
  }

  @Builder RankList() {
    Column({ space: 10 }) {
      List() {
        ForEach(this.isRefreshData ? this.rankData2 : this.rankData1, (item: RankData, index?: number) => {
          ListItem() {
            ListItemComponent({
              index:(Number(index)+1),
              name:item.name,
              vote:item.vote
            })
          }
        }, (item: RankData) => JSON.stringify(item))
      }
      .width('100%')
      .height('65%')
      .divider({strokeWidth:10})
    }
    .padding({left:15,right:15})
    .width('100%')
    .borderRadius(20)
    .width('90%')
    .alignItems(HorizontalAlign.Center)
    .backgroundColor(Color.White)
  }


  onBackPress() {
    if (this.isShowToast()) {
      prompt.showToast({
        message: "再按一次退出程序",
        duration: 1000
      })
      this.clickBackTimeRecord = new Date().getTime()
      return true
    }
    return false
  }

  isShowToast(): boolean {
    // 两次点击如果大于4500ms，那么返回true,该事件点击不处理；如果在4500ms两次点击，则执行该事件。
    let doubleTime: boolean = new Date().getTime() - this.clickBackTimeRecord > 4500
    return doubleTime
  }

}

@Component
struct ListItemComponent {
  index?: number
  name?:Resource
  vote:string
  @State isChange:boolean = false

  build() {
    Row() {
      Column(){
          Text(this.index?.toString())
            .lineHeight(24)
            .textAlign(TextAlign.Center)
            .width(24)
            .fontWeight(40)
            .fontSize(14)
      }
      .width('30%')
      .alignItems(HorizontalAlign.Start)

      Text(this.name)
        .width('50%')
        .fontWeight(500)
        .fontSize(16)
        .fontColor(this.isChange ? Color.Blue : Color.Black)
        .onClick(() => {
          this.isChange = !this.isChange;
        })

      Text(this.vote)
        .width('30%')
        .fontWeight(40)
        .fontSize(14)
        .fontColor(this.isChange ? Color.Blue : Color.Black)
    }
    .width('100%')
    .height(48)
  }
}

@Component
struct TitleComponent {
  @State title: string = "排行榜"
  @Link isRefreshData: boolean

  build() {
    Row() {
      Row() {
        Image($r("app.media.ic_public_back"))
          .width(21)
          .height(21)
          .margin({ right: 18 })
          .onClick(() => {
            let handler = getContext(this) as appContext.UIAbilityContext
            handler.terminateSelf()
          })
        Text(this.title)
          .fontSize(20)
      }
      .width('50%')
      .height('100%')
      .justifyContent(FlexAlign.Start)

      Row() {
        Image($r('app.media.loading'))
          .height(22)
          .width(22)
          .onClick(() => {
            this.isRefreshData = !this.isRefreshData
          })
      }
      .width('50%')
      .height('100%')
      .justifyContent(FlexAlign.End)
    }
    .width('100%')
    .padding({ left: 26, right: 26 })
    .margin({ top: 10 })
    .height(47)
    .justifyContent(FlexAlign.SpaceAround)
  }
}

@Component
struct TitleHeaderComponent {
  paddingValue: Padding | Length = 0
  widthValue: Length = 0

  build() {
    Row() {
      Text('排名').fontSize(14).width('30%').fontWeight(400).fontColor('#989a9c')
      Text('种类').fontSize(14).width('50%').fontWeight(400).fontColor('#989a9c')
      Text('得票数').fontSize(14).width('20%').fontWeight(400).fontColor('#989a9c')
    }
    .width(this.widthValue)
    .padding(this.paddingValue)
  }
}