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

功能点：

点击左上角返回直接退出APP
双击系统返回键退出APP
点击右上角提示“按钮被点击了”

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;

  build() {
    Row() {
      Column() {
        TitleComponent()
      }
      .width('100%')
    }
    .height('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 = "排行榜"

  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(() => {
            prompt.showToast({
              message:"按钮被点击了",
              duration:1000
            })
          })
      }
      .width('50%')
      .height('100%')
      .justifyContent(FlexAlign.End)
    }
    .width('100%')
    .padding({ left: 26, right: 26 })
    .margin({ top: 10 })
    .height(47)
    .justifyContent(FlexAlign.SpaceAround)

  }
}