ArkTS水果排行榜【代碼可執行】

 

# ArkTS 水果排行榜

> 代碼可執行
> 分爲五個文件

> 1.FruitDataModel.ets 定義app中需要的水果模型

> 2.TitleComponent.ets 定義Title組件

> 3.TableHeaderComponent.ets 定義表頭組件

> 4.ItemComponent.ets 定義列表項的子組件

>5.Index.ets UI入口組件

 

FruitDataModel.ets文件 定義app中需要的水果模型

/**
 * Models 水果對象
 */

export class FruitDataModel {
  private name:string
  private vote:string
  private id:string

  constructor(id:string, name:string, vote:string) {
    this.id = id
    this.name = name
    this.vote = vote
  }

}

 

TitleComponent.ets文件 定義Title組件

/**
 * TitleComponent Title組件
 */
import AppContext from '@ohos.app.ability.common'
@Component
export struct TitleComponent {

  @Link
  isRefreshData: boolean // 定義一個共享變量，是否刷新數據
  @State
  title: string = '水果排行榜' // 定義一個標題狀態變量

  build() {
    Row() {
      // 分爲兩部分
      // 第一部分：又由兩部分組成。1、返回圖標。2、標題
      Row() {
        Image($r('app.media.ic_back')) // 返回按鈕圖片
          .height(21)
          .width(21)
          .margin({right: 18})
          .onClick(()=>{
            // 退出整個APP
            let context = getContext(this) as AppContext.UIAbilityContext // 獲得上下文對象
            context.terminateSelf() // 關閉當前組件（退出）
          })
        Text(this.title)
          .fontSize('30.00fp')
      }
      .width('50%')
      .height('100%')
      .justifyContent(FlexAlign.Start)

      // 第二部分
      Row() {
        Image($r('app.media.ic_loading')) // 刷新按鈕圖標
          .width(22)
          .height(22)
          .onClick(()=>{
            this.isRefreshData = !this.isRefreshData
          })
      }
      .width('50%')
      .height('100%')
      .justifyContent(FlexAlign.End)
    }
    .width('100%')
    .height(47)
    .padding({left:26, right: 26})
    .margin({top:10})
    .justifyContent(FlexAlign.SpaceAround) // 平均分佈
  }
}

 

TableHeaderComponent.ets 定義表頭組件

/**
 * 表頭組件
 */

@Component
export struct TableHeaderComponent {

  paddingValue: Padding|Length = 0
  widthValue: Length = 0 // 表頭組件所佔用的寬度

  build() {
    Row() {
      Text('排名')
        .fontSize(16)
        .width('20%')
        .fontWeight(400)
        .fontColor('#989A9C')

      Text('種類')
        .fontSize(16)
        .width('50%')
        .fontWeight(400)
        .fontColor('#989A9C')

      Text('得票數')
        .fontSize(16)
        .width('30%')
        .fontWeight(400)
        .fontColor('#989A9C')
    }
    .width(this.widthValue)
    .padding(this.paddingValue)

  }
}

 

ItemComponent.ets 定義列表項的子組件

/**
 * 列表項的子組件
 */

@Component
export struct ItemComponent {

  private index: number
  private name: string
  private vote: string

  @State
  isChoice: boolean = false // 該行數據是否選中

  build() {
    Row() {
      // 三部分組成
      // 第一部分: 排名
      Column() {
        if (this.isCircleText()) { // 圓形的文本框
          this.CreateCircle(this.index)
        } else {
          Text(this.index.toString())
            .lineHeight(24)
            .textAlign(TextAlign.Center)
            .fontSize(16)
            .fontWeight(400)
            .width(24)
        }
      }
      .width('20%')
      .alignItems(HorizontalAlign.Start)

      // 第二部分：種類
      Text(this.name)
        .width('50%')
        .fontWeight(500)
        .fontSize(18)
        .fontColor(this.isChoice ? Color.Blue : '#182431')

      // 第三部分：得票數
      Text(this.vote)
        .width('30%')
        .fontSize(16)
        .fontWeight(400)
        .fontColor(this.isChoice ? Color.Blue : '#182431')
    }
    .width('100%')
    .height(48)
    .onClick(()=>{
      // 選中該行之後，顏色要變化
      this.isChoice = !this.isChoice
    })
  }

  @Builder // 構建函數
  CreateCircle(index: number) {
    Row() {
      Text(this.index.toString())
        .fontWeight(40)
        .fontSize(16)
        .fontColor(Color.White)
    }
    .justifyContent(FlexAlign.Center)
    .borderRadius(24)
    .size({width:24, height: 24})
    .backgroundColor(Color.Blue)
  }

  isCircleText(): boolean {
    // 判斷排名 是否爲前3名
    return this.index === 1|| this.index === 2 || this.index === 3
  }
}

 

Index.ets UI入口組件

/**
 * 入口UI
 */

import {FruitDataModel} from './FruitDataModel'
import {ItemComponent} from './ItemComponent'
import {TableHeaderComponent} from './TableHeaderComponent'
import {TitleComponent} from './TitleComponent'
@Entry
@Component
struct Index {

  @State dataSource1: FruitDataModel[] = [
    new FruitDataModel('1', '蘋果', '12000'),
    new FruitDataModel('2', '葡萄', '10320'),
    new FruitDataModel('3', '西瓜', '9801'),
    new FruitDataModel('4', '香蕉', '8431'),
    new FruitDataModel('5', '菠蘿', '7546'),
    new FruitDataModel('6', '榴蓮', '7431'),
    new FruitDataModel('7', '紅葡萄', '7187'),
    new FruitDataModel('8', '梨子', '7003'),
    new FruitDataModel('9', '楊桃', '6794'),
    new FruitDataModel('10', '番石榴', '6721')
  ]

  @State dataSource2: FruitDataModel[] = [
    new FruitDataModel('11', '西瓜', '8836'),
    new FruitDataModel('12', '蘋果', '8521'),
    new FruitDataModel('13', '香蕉', '8431'),
    new FruitDataModel('14', '葡萄', '7909'),
    new FruitDataModel('15', '紅葡萄', '7547'),
    new FruitDataModel('16', '梨子', '7433'),
    new FruitDataModel('17', '菠蘿', '7186'),
    new FruitDataModel('18', '榴蓮', '7023'),
    new FruitDataModel('19', '番石榴', '6794'),
    new FruitDataModel('20', '楊桃', '6721')
  ]

  @State
  isSwitchDataSource: boolean = true  // 是否切換數據源

  build() {
    Column() {
      // 分爲三部分
      // 第一部分：標題組件
      TitleComponent({isRefreshData:$isSwitchDataSource, title: '水果排行榜'})  // Link組件必須家$符號
      // 第二部分：表頭組件
      TableHeaderComponent({
        paddingValue: {
          left: 15,
          right: 15
        },
        widthValue: '92%'
      })
        .margin({
          top: 20,
          bottom: 15
        })
      // 第三部分：列表
      this.CreateArrayItemComponent()
    }
    .backgroundColor('#F1F3F5')
    .width('100%')
    .height('100%')
  }

  @Builder
  CreateArrayItemComponent(){
    // 構建一個列表
    Column() {
      List() {
        ForEach(this.isSwitchDataSource ? this.dataSource1 : this.dataSource2, // 根據狀態的值來切換不同的數據源
          (item:FruitDataModel, index: number) => {
            // 構建列表項
            ListItem() {
              ItemComponent({
                index: index + 1,
                // @ts-ignore
                name: item.name,
                // @ts-ignore
                vote: item.vote
              })
            }
          })
      }
      .width('100%')
      .height('65%')
      .divider({strokeWidth: 1})
    }
    .padding({
      left: 15,
      right: 15
    })
    .width('92%')
    .borderRadius(20)
    .alignItems(HorizontalAlign.Center)
    .backgroundColor(Color.White)
  }
}

 

效果展示

 

來源B站公開視頻：

華爲大佬最新鴻蒙HarmonyOS4.0（鴻蒙4）開發應用從入門到實戰視頻教程