運動記錄Demo的列表界面介紹

作者：木棉花潘穎琳 2022-10-18 15:49:28

系統 OpenHarmony

這是一個運動記錄的應用，主要用于管理健康記錄運動。可以添加運動信息，包括運動名稱、運動時長，并自動計算消耗的卡路里，在記錄頁面可以查看所添加的運動記錄。

??想了解更多關于開源的內容，請訪問：??

??51CTO 開源基礎軟件社區??

??https://ost.51cto.com??。

前言

在參加了"HarmonyOS ArkUI入門訓練營——健康生活實戰"后，了解并學習了聲明式UI開發框架及組件用法，本文是對筆者結營作品中的列表界面作一個小分享，涉及到List組件和Tabs組件的使用。

概述

這是一個運動記錄的應用，主要用于管理健康記錄運動。可以添加運動信息，包括運動名稱、運動時長，并自動計算消耗的卡路里，在記錄頁面可以查看所添加的運動記錄。其界面效果圖如下：

#打卡不停更#【木棉花】：運動記錄Demo的列表界面介紹-開源基礎軟件社區

正文

一、新建運動數據類

在MainAbility目錄下新建文件夾model,在model文件夾中新建兩個ets文件，分別命名為SportsData，SportsDataModel，如圖：

#打卡不停更#【木棉花】：運動記錄Demo的列表界面介紹-開源基礎軟件社區

在 SportsData 中添加代碼：

export enum Category {
  Walking = '走路',
  Running = '跑步',
  Swimming = '游泳',
  Riding = '騎行',
  Ball = '打球',
  Other = '其他'
}
let NextId = 0;
export class SportsData {
  id: string;
  name: string;
  image: Resource;
  value: number;
  category: Category;
  constructor(name: string, category: Category, image: Resource,value:number) {
    this.id = `${NextId++}`;
    this.name = name;
    this.image = image;
    this.category = category;
    this.value = value;
  }
}
export class RecordData {
  name: string;
  image: Resource;
  time:string;
  sum:number;
  constructor(name: string, image: Resource,time:string,sum:number) {
    this.name = name;
    this.image = image;
    this.time = time
    this.sum = sum;
  }
}

在 SportsDataModel 中添加代碼：

import {Category,SportsData} from './SportsData'
const SportsComposition:any[]=[
  {'name':'散步','category':Category.Walking,'image':$r('app.media.walk_slow'),'value':81},
  {'name':'快走(5km/h)','category':Category.Walking,'image':$r('app.media.walk_fast'),'value':188},
  {'name':'跑步(慢)','category':Category.Running,'image':$r('app.media.run'),'value':344},
  {'name':'跑步(快)','category':Category.Running,'image':$r('app.media.run_fast'),'value':475},
  {'name':'遛狗','category':Category.Walking,'image':$r('app.media.walk_dog'),'value':125},
  {'name':'游泳','category':Category.Swimming,'image':$r('app.media.swim'),'value':344},
  {'name':'乒乓球','category':Category.Ball,'image':$r('app.media.pingpong'),'value':188},
  {'name':'棒球','category':Category.Ball,'image':$r('app.media.baseball'),'value':188},
  {'name':'轉呼啦圈','category':Category.Other,'image':$r('app.media.hula'),'value':156},
  {'name':'跳繩','category':Category.Other,'image':$r('app.media.skip_rope'),'value':363},
  {'name':'騎自行車(<16km/h)','category':Category.Riding,'image':$r('app.media.ride'),'value':188},
  {'name':'騎自行車(16-19km/h)','category':Category.Riding,'image':$r('app.media.ride'),'value':363},
]
export function initializeOnStartup(): Array<SportsData> {
  let SportsDataArray: Array<SportsData> = []
  SportsComposition.forEach(item => {
    SportsDataArray.push(new SportsData(item.name,item.category,item.image,item.value));
  })
  return SportsDataArray;
}

二、List組件的使用

1、定義子組件的布局

為了方便預覽，可以用 @Preview 裝飾，然后打開預覽器，點擊圖示位置顯示。

#打卡不停更#【木棉花】：運動記錄Demo的列表界面介紹-開源基礎軟件社區

為了方便調試，可以先把數據用靜態數據代替，代碼如下。

@Preview
@Component
export struct SportsGridItem {
  private sportsItem: SportsData =  {'id':'8','name':'棒球','image':$r('app.media.baseball'),'value':188,'category':Category.Ball}
  private controller: CustomDialogController
  aboutToAppear() {
    this.controller = new CustomDialogController({
      builder: Record({ sportsItem: this.sportsItem }),
      alignment: DialogAlignment.Center
    })
  }
  @Builder sportsDetail(value: number) {
    Row({ space: 10 }) {
      Text(value.toString()).fontColor('#E14843').fontSize(16)
      Text('千卡/60分鐘').fontColor(Color.Gray).fontSize(16)
    }
  }
  build() {
    Row({ space: 10 }) {
      Image(this.sportsItem.image)
        .objectFit(ImageFit.Contain)
        .height(60)
        .aspectRatio(1)
        .borderRadius(12)
        .margin(5)
        .backgroundColor(Color.White)
      Column({ space: 6 }) {
        Text(this.sportsItem.name).fontSize(19).fontWeight(500)
        this.sportsDetail(this.sportsItem.value)
      }.alignItems(HorizontalAlign.Start)
    }
    .margin({ left: 10, top: 20 })
    .onClick(() => {
      this.controller.open()
    })
  }
}

2、列表組件的渲染

Scroll是可滾動容器組件，傳入運動類的數組，用ForEach循環遍歷渲染，傳參給子組件SportsGridItem。

@Component
export struct SportsGrid {
  private sportsItems: SportsData[]
  build() {
    Scroll() {
      List({ space: 20 }) {
        ForEach(this.sportsItems, (item: SportsData) => {
          ListItem() {
            SportsGridItem({ sportsItem: item })
          }
        }, (item: SportsData) => item.id.toString())
      }.height('100%')
    }
    .scrollBar(BarState.Off)
  }
}

到此步實現的是在一個列表里把所有子項列出來，但想要的效果是按類別將子項分類來顯示，那就繼續看下去吧~

三、Tabs組件的使用

為了讓頁簽更好看，從文檔中可以看到TabContent的TabBar屬性可選CustomBuilder類型，進一步可查看該自定義的組件屬性方法，需要用 @Builder 裝飾。

看完文檔后，那就用起來~，代碼如下：

@Builder tabBuilder(index: number, name: string) {
    Flex({ justifyContent: FlexAlign.Center, direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
      Text(name).fontSize(20).fontColor(Color.White)
    }
    .borderRadius(15)
    .width(90)
    .height(30)
    .backgroundColor(this.currentIndex === index ? '#3ECF69' : '#bfbfbf')
  }

為了實現按類別進行列表展示，即要對數據類的Category進行檢索分類來渲染。通過學習直播課程，知道有filter這個方法，可以對每個子項遍歷使用。

#打卡不停更#【木棉花】：運動記錄Demo的列表界面介紹-開源基礎軟件社區

于是總體代碼如下：

@Component
struct SportsCategory {
  private sportsItems: SportsData[]
  @State currentIndex: number = 0
  @Builder tabBuilder(index: number, name: string) {
    Flex({ justifyContent: FlexAlign.Center, direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
      Text(name).fontSize(20).fontColor(Color.White)
    }
    .borderRadius(15)
    .width(90)
    .height(30)
    .backgroundColor(this.currentIndex === index ? '#3ECF69' : '#bfbfbf')
  }
  build() {
    Stack() {
      Tabs({ barPosition: BarPosition.Start }) {
        TabContent() {
          SportsGrid({ sportsItems: this.sportsItems.filter(item => (item.category === Category.Walking)) })
        }.tabBar(this.tabBuilder(0, '走路'))
        TabContent() {
          SportsGrid({ sportsItems: this.sportsItems.filter(item => (item.category === Category.Running)) })
        }.tabBar(this.tabBuilder(1, '跑步'))
        TabContent() {
          SportsGrid({ sportsItems: this.sportsItems.filter(item => (item.category === Category.Swimming)) })
        }.tabBar(this.tabBuilder(2, '游泳'))
        TabContent() {
          SportsGrid({ sportsItems: this.sportsItems.filter(item => (item.category === Category.Riding)) })
        }.tabBar(this.tabBuilder(3, '騎行'))
        TabContent() {
          SportsGrid({ sportsItems: this.sportsItems.filter(item => (item.category === Category.Ball)) })
        }.tabBar(this.tabBuilder(4, '打球'))
        TabContent() {
          SportsGrid({ sportsItems: this.sportsItems.filter(item => (item.category === Category.Other)) })
        }.tabBar(this.tabBuilder(5, '其他'))
      }
      .vertical(true)
      .barHeight('70%')
      .barWidth(100)
      .onChange((index: number) => {
        this.currentIndex = index
      })
    }
  }
}

最后，在底部的頁簽組件中添加使用、以及運動類和記錄類的數據使用、搜索界面的實現等內容，預告在下一篇文章啦，歡迎評論區交流~

結語

以上就是本次的小分享啦！

??想了解更多關于開源的內容，請訪問：??

??51CTO 開源基礎軟件社區??

??https://ost.51cto.com??。

責任編輯：jianghua 來源： 51CTO開源基礎軟件社區

List組件 Tabs組件