【Harmony OS 4.0】水果排行榜案例

在这里插入图片描述
ets/example2/Models

export class FruitsData {id: stringname: stringvote: stringconstructor(id: string, name: string, vote: string) {this.id = idthis.name = namethis.vote = vote}
}

ets/example2/TitleComponent

// app标题子组件
import APPContext from '@ohos.app.ability.common'@Component
export struct TitleComponent {@Prop title: string = ''@Link isRefreshDate: booleanbuild() {Row() {Row() {Image($r('app.media.back')).width(16).height(16).margin({ right: 18 }).onClick(() => {let context = getContext(this) as APPContext.UIAbilityContext // 获得上下文环境，继承自Contextcontext.terminateSelf() // 关闭当前组件})Text(this.title).fontSize(20)}.width('50%').height('100%').justifyContent(FlexAlign.Start)Row() {Image($r('app.media.loading')).width(18).height(18).onClick(() => {this.isRefreshDate = !this.isRefreshDate})}.width('50%').height('100%').justifyContent(FlexAlign.End)}.width('100%').height(55).padding({ left: 10, right: 10 }).justifyContent(FlexAlign.SpaceAround)}
}

ets/example2/TableHeaderComponent

// 表头子组件
@Component
export struct TableHeaderComponent {@Prop widthValue: Length = 0 // 表头组件宽度@Prop paddingValue: Padding | Length = 0 // 表头内边距build() {Row() {Text('排名').fontSize(16).width('20%').fontColor('#888888')Text('种类').fontSize(16).width('50%').fontColor('#888888')Text('得票数').fontSize(16).width('30%').fontColor('#888888')}.width(this.widthValue).height(40).padding(this.paddingValue).justifyContent(FlexAlign.SpaceAround)}
}

ets/example2/ItemComponent

// 列表子组件
@Component
export struct ItemComponent {@Prop index: number@Prop name: string@Prop vote: string@State isChoice: boolean = falsebuild() {Row() {Column() {if (this.isCircleText()) {this.CreateCircleText(this.index)} else {Text(this.index.toString()).fontSize(18).fontWeight(600)}}.width('20%').alignItems(HorizontalAlign.Start)Column() {Text(this.name).fontColor(this.isChoice? '#5500FF' : '000000').fontSize(18).fontWeight(600)}.width('50%').alignItems(HorizontalAlign.Start)Column() {Text(this.vote).fontColor(this.isChoice? '#5500FF' : '000000').fontSize(18).fontWeight(600)}.width('30%').alignItems(HorizontalAlign.Start)}.width('100%').height(48).onClick(() => {this.isChoice = !this.isChoice})}// 创建圆形文本框的构建函数@BuilderCreateCircleText(index: number) {Row() {Text(index.toString()).fontSize(18).fontColor(Color.White).fontWeight(600)}.justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Center).borderRadius(24).size({ width: 22, height: 22 }).backgroundColor('#5500FF')}// 判断函数isCircleText(): boolean {return this.index === 1 || this.index === 2 || this.index === 3}
}

ets/example2/Index

// 父组件
import { FruitsData } from "./Models"
import { TitleComponent } from './TitleComponent'
import { TableHeaderComponent } from './TableHeaderComponent'
import { ItemComponent } from './ItemComponent'@Entry
@Component
struct Index {@State dataSource1: FruitsData[] = [new FruitsData('1', '苹果', '5432'),new FruitsData('2', '西梅', '3676'),new FruitsData('3', '无花果', '2254'),new FruitsData('4', '水蜜桃', '2154'),new FruitsData('5', '葡萄', '2023'),new FruitsData('6', '圣女果', '1973'),new FruitsData('7', '西瓜', '1817'),new FruitsData('8', '香蕉', '1732'),]@State dataSource2: FruitsData[] = [new FruitsData('9', '西梅', '6676'),new FruitsData('10', '无花果', '6354'),new FruitsData('11', '杨梅', '5853'),new FruitsData('12', '西瓜', '4817'),new FruitsData('13', '香蕉', '3732'),new FruitsData('14', '榴莲', '2704'),new FruitsData('15', '杨桃', '1636'),new FruitsData('16', '梨', '1422'),]@State isSwitchDataSource: boolean = truebuild() {Column() {Row() {TitleComponent({ isRefreshDate: $isSwitchDataSource, title: '水果排行榜' })}Row() {TableHeaderComponent({ widthValue: '92%', paddingValue: { left: 15, right: 15 } }).margin({ top: 15, bottom: 10 })}Row() {this.CreateArrayItemComponent()}}.width('100%').height('100%').backgroundColor('#EEEEEE')}@BuilderCreateArrayItemComponent() {Column() {List() {ForEach(this.isSwitchDataSource ? this.dataSource1 : this.dataSource2, (item: FruitsData, index: number) => {ListItem() {ItemComponent({ index: index + 1, name: item.name, vote: item.vote })}})}.width('100%').height("65%").divider({ strokeWidth: 1 })}.width('92%').padding({ left: 15, right: 15 }).borderRadius(20).alignItems(HorizontalAlign.Center).backgroundColor(Color.White)}
}