水果排行榜的创建

wx644a0eebbd176

发布于 2023-7-15 23:24

4532浏览

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)
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.

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)
}
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

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%')
      }
    }
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.

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

}
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.

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'
}]
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.