水果排行榜的创建

wx644a0eebbd176

发布于 2023-7-15 23:24

浏览

0收藏

下载样例代码后解压

水果排行榜的创建-鸿蒙开发者社区

index.ets

//模块导入
import{Fruit,rankData1,rankData2}from '../module/DataModel'
import{TitleComponent} from '../view/TitleComponent'
import {ListHeaderComponent} from '../view/ListHeaderComponent'
import {ListItemComponent} from'../view/ListItemComponent'

@Entry
@Component
struct Index {
  fruitsDate: Array<Fruit> = rankData1
  fruitsData2: Array<Fruit> = rankData2
  @State isSwitchData: boolean = true

  build() {
    Column() {//沿垂直方向布局的容器
      //标题栏
      TitleComponent({isSwitchData:$isSwitchData})

      //排行榜列表头
      ListHeaderComponent()

      //排行榜列表项
      this.RankList()

    }
    .width('100%')
    .height('100%')
    .backgroundColor('#f1f3f5')
  }

  @Builder RankList(){
    Column() {
      List() {
        //苹果
        ForEach(this.isSwitchData ? this.fruitsDate : this.fruitsData2, (item:Fruit) => {

          ListItem() {
            ListItemComponent({
              index:item.id,
              name:item.name,
              vote:item.vote
            })
          }
          .width('100%')
          .height(47)
        })
      }

    }
    .width('90%')
    .padding(15)
    .backgroundColor(Color.White)
    .borderRadius(18)
  }
}

ListHeaderComponent

@Component
export struct ListHeaderComponent{
build(){
  Row() {
    Text('排名')
      .fontSize(14)
      .fontColor('#989a9c')
      .width('30%')

    Text('种类')
      .fontSize(14)
      .fontColor('#989a9c')
      .width('50%')


    Text('得票数')
      .fontSize(14)
      .fontColor('#989a9c')
      .width('20%')
  }
  .width('90%')
  .padding(15)
}
}

ListItemComponent

@Component
export struct ListItemComponent{
  index:string
  name:string
  vote:string
  build(){
    Row() {
      if (parseInt(this.index) <= 3) {
        Column() {
          Row() {
            Text(this.index)
              .fontSize(14)
              .fontColor(Color.White)
          }
          .width(24)
          .height(24)
          .backgroundColor("#0007dff")
          .borderRadius(24)
          .justifyContent(FlexAlign.Center)
        }
        .width('30%')
        .alignItems(HorizontalAlign.Start)
      } else {
        Column() {
          Text(this.index)
            .fontSize(16)
            .fontWeight(FontWeight.Bold)
            .width(24)
            .textAlign(TextAlign.Center)

        }
        .width('30%')
        .alignItems(HorizontalAlign.Start)
      }

      Row() {

        Text(this.name)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
          .width('50%')

        Text(this.vote)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
          .width('20%')
      }
    }
  }
}

TitleComponent

@Component
export struct TitleComponent{
  @Link isSwitchData:boolean;
build(){
  Row() {
    Row() {
      Image($r('app.media.app_icon'))
        .width(22)
        .height(22)
        .margin({ right: 18 })

      Text('排行榜')
        .fontSize(20)
    }
    .width("50%")
    .height('100%')
    .justifyContent(FlexAlign.Start)

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

}
}

DataModel.ets

export interface Fruit{
  id:string
  name:string
  vote:string
}
export const rankData1:Array<Fruit> = [{
  'id': '1',
  'name': '苹果',
  'vote': '1852'
},
  {
    'id': '2',
    'name': '菠萝',
    'vote': '1257'
  },
  {
    'id': '3',
    'name': '草莓',
    'vote': '1123'
  },
  {
    'id': '4',
    'name': '香蕉',
    'vote': '1016'
  }
  ,
  {
    'id': '5',
    'name': '石榴',
    'vote': '943'
  }
  ,
  {
    'id': '6',
    'name': '枣',
    'vote': '897'
  }
  ,
  {
    'id': '7',
    'name': '柑橘',
    'vote': '869'
  }
  ,
  {
    'id': '8',
    'name': '樱桃',
    'vote': '820'
  }
  ,
  {
    'id': '9',
    'name': '桂圆',
    'vote': '795'
  }
  ,
  {
    'id': '10',
    'name': '桃',
    'vote': '783'
  }
  ,
  {
    'id': '11',
    'name': '西瓜',
    'vote': '780'
  }
  ,
  {
    'id': '12',
    'name': '哈密瓜',
    'vote': '689'
  }
]
export const rankData2: Array<Fruit> = [
  {
    'id': '13',
    'name': '凤梨',
    'vote': '602'
  },
  {
    'id': '14',
    'name': '火龙果',
    'vote': '587'
  }, {
  'id': '15',
  'name': ' 杨梅',
  'vote': '568'
}]

@Entry装饰器：装饰的组件将作为页面的入口，页面加载时将被渲染显示

@Component装饰器：装饰结构体struct，表示这个结构体是一个UI组件

build方法：每个组件必须实现build方法，用于定义组件的声明式UI描述

容器组件：

Column沿垂直方向布局的容器

Column(value?:{space?:string|number})

参数：space 纵向布局的元素垂直方向间距

类型定义：

资源引用类型：用于设置组件的属性的值

可以通过$r或$rawfile创建Resource类型的对象，不可以修改Resource中的各属性的值

$r('belonging.type.name')

belonging:系统资源或者应用资源，相应的取值为'sys'或'app'