??想了解更多關于開源的內容，請訪問：??
??51CTO 開源基礎軟件社區??
??https://ost.51cto.com??
前言
在參加了"HarmonyOS ArkUI入門訓練營——健康生活實戰"后，了解并學習了聲明式UI開發框架及組件用法，本文是對筆者結營作品中作一個小分享。在筆者上篇及前篇文章中，已對本demo作了部分組件的介紹，本文將對剩余部分作介紹分享~
概述
本文主要介紹的是搜索欄跳轉至搜索結果界面，以及前述文章介紹的組件的應用。效果圖如下：
正文
一、工程文件架構
二、完善主界面及數據的傳遞
1、數據傳遞實現運動記錄的增刪改查
由于運動記錄的增刪改查是在彈窗組件的點擊事件里相應的，起初我是打算使用@Link來傳遞數據的，但是在自定義彈窗組件的builder里會對$修飾的變量報錯，于是我就改用全局變量了。為了響應變量的狀態變化，用@State裝飾。也許用數據庫會更方便些，后期再作優化吧！
var RDArray: Array<RecordData> = []
var RSports: Array<SportsData> = []
Record 彈窗下定義變量。
@State RecordDataArray: Array<RecordData> = RDArray
@State RecordSports: Array<SportsData> = RSports
在上上篇文章提到的彈窗組件中，定義點擊事件。“修改記錄”模式下，“刪除記錄”按鍵的“確定”響應代碼如下：
secondaryButton: {
value: '確定',
action: () => {
RDArray.splice(this.item_index, 1)
RSports.splice(this.item_index, 1)
this.controller.close()
}主彈窗右上角的“確定”按鍵響應代碼如下：
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、完善主頁面
主頁面底部是有兩個頁簽的導航欄，第一個頁簽顯示目錄界面，該界面的頂部有一個搜索欄，與下方的目錄成縱向布局，第二個頁簽顯示記錄界面。記錄界面的組件與上篇文章提到的List組件用法無異，只是渲染的數據不同罷了，代碼相似所以本文就不介紹了。此外對于記錄界面，若無記錄則顯示“暫無記錄”，為了讓界面美觀些，筆者給背景添加了圖片。點擊“搜索”按鍵時會帶參跳轉至搜索結果的頁面’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 = '運動名稱';
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: '請輸入運動名稱' })
.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('暫無運動記錄').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;
})
}
}
三、搜索結果界面
1、接收頁面路由的傳參，并初始化工程內的運動項數據，便于遍歷查找。
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> = []
...
}
由于有的運動項目名稱相同，但配速不同，因此在設置字符串匹配判斷時取字符串的子串來匹配。
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修飾，就能在搜索結果界面使用了，將搜索的結果用數組存放，接著傳參進SportsGrid進行列表渲染。
build() {
Column() {
PageTitle({ title: '搜索結果' })
Row() {
Image($r('app.media.search'))
.width(26)
.height(26)
.objectFit(ImageFit.Cover)
.margin({ left: 10 })
TextInput({placeholder:'請輸入運動名稱'})
.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('沒有查到與此相關的結果').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()
})
}結語
以上就是本次的小分享啦！
文章相關附件可以點擊下面的原文鏈接前往下載：
https://ost.51cto.com/resource/2339。
??想了解更多關于開源的內容，請訪問：??
??51CTO 開源基礎軟件社區??
??https://ost.51cto.com??。
