基于ArkUI的運(yùn)動記錄Demo

作者：木棉花潘穎琳 2022-10-19 15:12:05

本文主要介紹的是搜索欄跳轉(zhuǎn)至搜索結(jié)果界面，以及前述文章介紹的組件的應(yīng)用。

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

前言

在參加了"HarmonyOS ArkUI入門訓(xùn)練營——健康生活實(shí)戰(zhàn)"后，了解并學(xué)習(xí)了聲明式UI開發(fā)框架及組件用法，本文是對筆者結(jié)營作品中作一個小分享。在筆者上篇及前篇文章中，已對本demo作了部分組件的介紹，本文將對剩余部分作介紹分享~

概述

本文主要介紹的是搜索欄跳轉(zhuǎn)至搜索結(jié)果界面，以及前述文章介紹的組件的應(yīng)用。效果圖如下：

#打卡不停更#【木棉花】：基于ArkUI的運(yùn)動記錄Demo-開源基礎(chǔ)軟件社區(qū)

正文

一、工程文件架構(gòu)

#打卡不停更#【木棉花】：基于ArkUI的運(yùn)動記錄Demo-開源基礎(chǔ)軟件社區(qū)

二、完善主界面及數(shù)據(jù)的傳遞

1、數(shù)據(jù)傳遞實(shí)現(xiàn)運(yùn)動記錄的增刪改查

由于運(yùn)動記錄的增刪改查是在彈窗組件的點(diǎn)擊事件里相應(yīng)的，起初我是打算使用@Link來傳遞數(shù)據(jù)的，但是在自定義彈窗組件的builder里會對$修飾的變量報錯，于是我就改用全局變量了。為了響應(yīng)變量的狀態(tài)變化，用@State裝飾。也許用數(shù)據(jù)庫會更方便些，后期再作優(yōu)化吧！

var RDArray: Array<RecordData> = []
var RSports: Array<SportsData> = []

Record 彈窗下定義變量。

@State RecordDataArray: Array<RecordData> = RDArray
  @State RecordSports: Array<SportsData> = RSports

在上上篇文章提到的彈窗組件中，定義點(diǎn)擊事件。“修改記錄”模式下，“刪除記錄”按鍵的“確定”響應(yīng)代碼如下：

secondaryButton: {
                            value: '確定',
                            action: () => {
                              RDArray.splice(this.item_index, 1)
                              RSports.splice(this.item_index, 1)
                              this.controller.close()
                            }

主彈窗右上角的“確定”按鍵響應(yīng)代碼如下：

if (this.mode == 0) {
                RDArray.push({
                  'name': this.sportsItem.name,
                  'image': this.sportsItem.image,
                  'time': this.time,
                  'sum': this.sum
                })
                RSports.push(this.sportsItem)
              }
              else if (this.mode == 1) {
                RDArray[this.item_index]=
              {
                  'name': this.sportsItem.name,
                  'image': this.sportsItem.image,
                  'time': this.time,
                  'sum': this.sum
                }
                RSports.push(this.sportsItem)
              }

2、完善主頁面

主頁面底部是有兩個頁簽的導(dǎo)航欄，第一個頁簽顯示目錄界面，該界面的頂部有一個搜索欄，與下方的目錄成縱向布局，第二個頁簽顯示記錄界面。記錄界面的組件與上篇文章提到的List組件用法無異，只是渲染的數(shù)據(jù)不同罷了，代碼相似所以本文就不介紹了。此外對于記錄界面，若無記錄則顯示“暫無記錄”，為了讓界面美觀些，筆者給背景添加了圖片。點(diǎn)擊“搜索”按鍵時會帶參跳轉(zhuǎn)至搜索結(jié)果的頁面’pages/search_result’，代碼如下：

@Entry
@Component
struct SportsCategoryList {
  @State RDArray: Array<RecordData> = RDArray
  @State RSports: Array<SportsData> = RSports
  @State currentIndex: number = 0;
  @State search_item: string = '運(yùn)動名稱';
  private sportsItem: SportsData[] = initializeOnStartup()

  @Builder bottomBarBuilder(name: string, image_active: Resource, image_inactive: Resource, index: number) {
    Column() {
      Image(this.currentIndex === index ? image_active : image_inactive).width(32).aspectRatio(1).fillColor(this.currentIndex === index ? '#3ECF69' : '#bfbfbf')
      Text(name).fontColor(this.currentIndex === index ? '#3ECF69' : '#bfbfbf').fontSize(18).margin({ bottom: 3 })
    }.alignItems(HorizontalAlign.Center).width('100%')
  }
  build() {
    Tabs({ barPosition: BarPosition.End }) {
      TabContent() {
        Column() {
          Row() {
            Image($r('app.media.search'))
              .width(26)
              .height(26)
              .objectFit(ImageFit.Cover)
              .margin({ left: 10 })

            TextInput({ placeholder: '請輸入運(yùn)動名稱' })
              .width('60%')
              .height(30)
              .backgroundColor(Color.White)
              .onChange((value: string) => {
                this.search_item = value
              })
            Blank()
            Button('搜索')
              .backgroundColor('#3ECF69')
              .borderRadius(30)
              .fontSize(15)
              .fontColor(Color.White)
              .height(30)
              .width('20%')
              .margin({ left: 8, right: 3, top: 3, bottom: 3 })
              .onClick(() => {
                router.push({
                  url: 'pages/search_result',
                  params: {
                    sports: this.search_item
                  }
                })
              })
          } //search
          .borderColor('#3ECF69')
          .borderWidth(2)
          .borderRadius(50)
          .backgroundColor(Color.White)
          .width('90%')
          .height(40)
          .margin({ top: 5, bottom: 5, left: 5, right: 5 })
          SportsCategory({ sportsItems: this.sportsItem ,RecordSports:$RSports,RecordDataArray:$RDArray})
        }
        .backgroundImage($r('app.media.background'))
        .backgroundImageSize({ width: '100%', height: '100%' })
      }.tabBar(this.bottomBarBuilder('主頁', $r('app.media.index'), $r('app.media.indexgray'), 0))
      TabContent() {
        Column() {
          if (this.RDArray.length != 0) {
            RecordGrid({RecordDataArray:$RDArray,RecordSports:$RSports})
          }
          else {
            Text('暫無運(yùn)動記錄').fontSize(19).width('100%').height(20).margin({ top: 12, left: 20 })
          }
        }
        .width('100%')
        .height('100%')
        .backgroundImage($r('app.media.background2'))
        .backgroundImageSize({ width: '100%', height: '100%' })

      }.tabBar(this.bottomBarBuilder('記錄', $r('app.media.statistics'), $r('app.media.statisticsgray'), 1))
    }
    .onChange((index: number) => {
      this.currentIndex = index;
    })
  }
}

三、搜索結(jié)果界面

1、接收頁面路由的傳參，并初始化工程內(nèi)的運(yùn)動項(xiàng)數(shù)據(jù)，便于遍歷查找。

import router from '@ohos.router';
import { initializeOnStartup } from '../model/SportsDataModels'
import { SportsData,RecordData } from '../model/SportsData'
import { SportsGrid,RDArray,RSports } from './SportsCategoryList'
@Entry
@Component
struct Search_result {
  @State name:string = router.getParams()['sports']
  private sportsItem: SportsData[] = initializeOnStartup()
  private ResultDataArray: Array<SportsData> = []
...
}

由于有的運(yùn)動項(xiàng)目名稱相同，但配速不同，因此在設(shè)置字符串匹配判斷時取字符串的子串來匹配。

aboutToAppear() {
    let item;
    for (item of this.sportsItem) {
      if (item.name.length >= this.name.length) {
        if (this.name == item.name.substring(0, this.name.length)) {
          this.ResultDataArray.push(item);
        }
      }
      else {
        if (this.name == item.name) {
          this.ResultDataArray.push(item);
        }
      }
    }
  }

將SportsCategoryList中的SportsGrid組件用export修飾，就能在搜索結(jié)果界面使用了，將搜索的結(jié)果用數(shù)組存放，接著傳參進(jìn)SportsGrid進(jìn)行列表渲染。

build() {
    Column() {
      PageTitle({ title: '搜索結(jié)果' })
      Row() {
        Image($r('app.media.search'))
          .width(26)
          .height(26)
          .objectFit(ImageFit.Cover)
          .margin({ left: 10 })
        TextInput({placeholder:'請輸入運(yùn)動名稱'})
          .width('60%')
          .height(30)
          .backgroundColor(Color.White)
        Blank()
        Button('搜索')
          .backgroundColor('#3ECF69')
          .borderRadius(30)
          .fontSize(15)
          .fontColor(Color.White)
          .height(30)
          .width('20%')
          .margin({ left: 8, right: 3, top: 3, bottom: 3 })
          .onClick(() => {
            router.push({
              url: 'pages/search_result',
              params: {
                sports: this.sportsItem
              }
            })
          })
      } //search
      .borderColor('#3ECF69')
      .borderWidth(2)
      .borderRadius(50)
      .backgroundColor(Color.White)
      .width('90%')
      .height(40)
      .margin(5)

      Scroll() {
        Column() {
          if (this.ResultDataArray.length != 0) {
            SportsGrid({ sportsItems: this.ResultDataArray })
          }
          else {
            Text('沒有查到與此相關(guān)的結(jié)果').fontSize(19).width('100%').height(20).margin({ top: 12, left: 20 })
          }
        }
      }
      .scrollBar(BarState.Off)
    }.height('100%')
    .width('100%')
    .backgroundImage($r('app.media.background'))
    .backgroundImageSize({ width: '100%', height: '100%' })
  }
}
@Component
struct PageTitle {
  private title: string
  build() {
    Flex({ alignItems: ItemAlign.Start }) {
      Image($r('app.media.Back'))
        .width(21.8)
        .height(19.6)
      Text(this.title)
        .fontSize(21.8)
        .margin({ left: 17.4 })
    }
    .height(61)
    .padding({ top: 15, bottom: 10, left: 28.3 })
    .onClick(() => {
      router.back()
    })
  }