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

功能点：

1. 简单地列表显示，并实现点击事件，背景颜色改变

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

   
   33.gif

import appContext from '@ohos.app.ability.common'
import prompt from '@ohos.promptAction';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  private clickBackTimeRecord: number = 0;
  @State arr: string[] = ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110']
  @State arr_reverse: string[] = ['110', '100', '90', '80', '70', '60', '50', '40', '30', '20', '10']
  @State isChange: boolean = false
  @State isRefreshData: boolean = false

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

  @Builder RankList() {
    Column({ space: 10 }) {
      ForEach(this.isRefreshData?this.arr_reverse:this.arr, (item: string) => {
        Text(item)
          .fontSize(18)
          .fontColor('#fff')
          .backgroundColor(this.isChange ? Color.Blue : Color.Green)
          .width('100%')
          .onClick(() => {
            this.isChange = !this.isChange
          })
      }, (item: string) => item)
    }
    .width('100%')
  }

  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 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)
  }
}