demo 汽車之家(渲染-篩選-排序-模塊抽離數據)

效果圖展示:

代碼截圖注釋

詳情實現筆記

總體目標(按需求點對照代碼)

  • 數據模塊化、整體渲染框架、篩選/排序的高亮與行為,全部已在 Index.ets + CarData.ets 落地。下面按圖片需求 2~4 點逐條總結,并給出關鍵代碼定位與“為什么”。

1. 數據模塊化(數據模型/源)

  • CarData.ets 定義強類型模型 Car 與靜態數據源 carList,頁面只依賴這一個入口。
export interface Car {count: number // 銷量image: ResourceStr // 圖片series_name: string // 名字rank: number // reduce(熱度)id: number // idmin_price: number // 最低價max_price: number // 最高價type: number // 類型 1緊湊汽車 2微型車 3小型車 4中型車
}
  • 頁面引入并作為狀態初始化,后續所有篩選/排序都基于它更新渲染列表。
import { Car, carList } from '../models/CarData'
@State carList: Car[] = carList//汽車的列表
@State scaleX: number = 1
@State scaleY: number = 1
  • 為什么:強類型防止字段誤用;把“原始數據池”與“渲染狀態”分離,篩選始終從全量數據重新計算,結果可預期。

2. 渲染汽車列表

  • 2.1 基于提供的數據渲染 List 列表(圖片、名稱、價格、銷量)。
List({ space: 10 }) {ForEach(this.carList, (item: Car, index: number) => {ListItem() {Row({ space: 8 }) {// 名次圖標/數字見下節Image(item.image).width(100).syncLoad(true)Column({ space: 10 }) {Text(item.series_name)Text(item.min_price.toFixed(2) + '-' + item.max_price.toFixed(2) + '萬').fontColor(Color.Orange).fontSize(15)}
  • 2.2 前三名用獎牌圖,之后用序號 index+1
if (index === 0) {Image($r('app.media.ic_homework_first')).width(40)
} else if (index == 1) {Image($r('app.media.ic_homework_second')).width(40)
} else if (index === 2) {Image($r('app.media.ic_homework_third')).width(40)
} else {Text((index + 1).toString()).fontSize(25)
}
  • 為什么:榜單視覺區分前 3;其余用數字簡潔直觀。

3. 渲染“篩選區/排序區”高亮切換

  • 3.1 篩選區(車型標簽文字列表)+ 高亮
filterList = ['全部', '緊湊型車', '微型車', '小型車', '中型車',]
@State filterListActiveIndex: number = 0
ForEach(this.filterList, (item: string, index: number) => {Text(item).fontColor(this.filterListActiveIndex === index ? Color.Red : '#595B5D')
  • 3.2 排序區(文字列表)+ 高亮
sortList = ['熱度', '價格', '銷量']
@State sortListActiveIndex: number = 0
ForEach(this.sortList, (item: string, index: number) => {Text(item).fontColor(this.sortListActiveIndex === index ? Color.Red : Color.Black)
  • 為什么:用 @State 保存當前索引,通過條件 fontColor 切換高亮,點擊只需改索引即可即時反饋。

4. 實現篩選與排序效果

  • 4.1 篩選:點擊車型標簽 → 過濾對應列表并渲染。
.onClick(() => {this.filterListActiveIndex = index
this.carList = carList.filter((ele: Car, index) => {return item === '全部' ? true : ele.type === this.filterListActiveIndex
})
})
  • 為什么:每次都基于“原始 carList”過濾,避免在上一次結果上疊加篩選造成數據越來越少;利用“索引=type 值”的約定實現最短判斷。
  • 4.2 排序:點擊排序項 → 對當前數組排序
this.sortListActiveIndex = index
this.carList = this.carList.sort((a: Car, b: Car) => {if (this.sortListActiveIndex === 0) {      // 4.2.1 熱度return a.rank - b.rank                    // rank 升序} else if (this.sortListActiveIndex === 1) {// 4.2.2 價格return (a.max_price - a.min_price) - (b.max_price - b.min_price)} else {                                    // 4.2.3 銷量return b.count - a.count                  // 降序}
})
  • 為什么:先篩后排符合用戶習慣;對“當前結果集”排序即可;sort 原地排序效率高并配合賦值觸發 UI 更新。
  • 注意與需求對齊:
    • 需求 4.2.2 寫的是“max_price 降序”。當前實現是“價格區間寬度升序”。若要與需求一致,應改為:
      • 價格(最高價降序)比較器:(a, b) => b.max_price - a.max_price

額外:按鈕動畫

Text('詢底價').backgroundColor('#027DFF').padding(5).borderRadius(3).fontColor('#fff').scale({ x: this.scaleX, y: this.scaleY }).onAppear(() => { this.scaleX = 1.1; this.scaleY = 1.1 }).animation({ iterations: -1, playMode: PlayMode.AlternateReverse })
  • 為什么:出現即啟動無限往返縮放,形成“呼吸”吸引點擊。

小結與對齊校驗

  • 整體渲染:頂部標題/圖標 + 篩選條 + 時間/排序 + 列表,結構完整;前三名獎牌與序號展示符合 2.2。
  • 高亮:篩選與排序均用 @State 索引控制,點擊即時變色。
  • 篩選:點擊車型后基于全量數據按 type 過濾,符合 4.1。
  • 排序:熱度升序、銷量降序已符合 4.2.1/4.2.3;價格需將比較器改為“max_price 降序”以完全符合 4.2.2。

全部代碼:

CarData_接口和數據

export interface Car {count: number // 銷量image: ResourceStr // 圖片series_name: string // 名字rank: number // reduce(熱度)id: number // idmin_price: number // 最低價max_price: number // 最高價type: number // 類型 1緊湊汽車 2微型車 3小型車 4中型車
}
export const carList: Car[] = [{count: 30001,image: 'http://p6-dcd.byteimg.com/img/tos-cn-i-dcdx/2b0405ab3ec543bf9bef91533b82899f~tplv-resize:480:0.png',series_name: '凱美瑞',rank: 1,id: 535,min_price: 17.18,max_price: 20.68,type: 4,},{count: 30456,image: 'http://p6-dcd.byteimg.com/img/motor-mis-img/af835d978de92b8342d900c8473c8d88~tplv-resize:480:0.png',series_name: '思域',rank: 2,id: 276,min_price: 9.69,max_price: 15.49,type: 1,},{count: 32178,image: 'http://p9-dcd.byteimg.com/img/tos-cn-i-dcdx/76d8b7dd596a42668c660711eb63ba36~tplv-resize:480:0.png',series_name: '歐拉黑貓',rank: 3,id: 2911,min_price: 5.98,max_price: 10.28,type: 2,},{count: 35690,image: 'http://p3-dcd.byteimg.com/img/tos-cn-i-dcdx/b16feb96960c4b178686faea93e71f3c~tplv-resize:480:0.png',series_name: '秦PLUS DM-i',rank: 4,id: 4802,min_price: 7.98,max_price: 12.58,type: 1,},{count: 37045,image: 'http://p9-dcd.byteimg.com/img/tos-cn-i-dcdx/c582d200e0fe44c7b1b5f3b6134c8849~tplv-resize:480:0.png',series_name: '小螞蟻',rank: 5,id: 1101,min_price: 5.69,max_price: 8.9,type: 2,},{count: 38967,image: 'http://p1-dcd.byteimg.com/img/tos-cn-i-dcdx/db765ed4695e4d1e808f3344a2637ff8~tplv-resize:480:0.png',series_name: '奧迪A4L',rank: 6,id: 96,min_price: 23.17,max_price: 29.26,type: 4,},{count: 40321,image: 'http://p1-dcd.byteimg.com/img/tos-cn-i-dcdx/a6ee19f8cb8b4ad8bab7f2b3cb0e4fa1~tplv-resize:480:0.png',series_name: 'Polo',rank: 7,id: 391,min_price: 6.39,max_price: 9.79,type: 3,},{count: 42768,image: 'http://p1-dcd.byteimg.com/img/motor-mis-img/5a66c6bc0c1d71c7e6f68f53b902d1b9~tplv-resize:480:0.png',series_name: '奔奔E-Star',rank: 8,id: 4416,min_price: 6.69,max_price: 6.69,type: 2,},{count: 45603,image: 'http://p3-dcd.byteimg.com/img/tos-cn-i-dcdx/b904c6bfc5094657bbcad15af499fd16~tplv-resize:480:0.png',series_name: '飛度',rank: 9,id: 283,min_price: 6.98,max_price: 9.18,type: 3,},{count: 47892,image: 'http://p6-dcd.byteimg.com/img/motor-mis-img/b4f69ed40e9e2f4f40a8874ce323e181~tplv-resize:480:0.png',series_name: '寶馬 3 系',rank: 10,id: 145,min_price: 24,max_price: 32.8,type: 4,},{count: 49103,image: 'http://p1-dcd.byteimg.com/img/motor-mis-img/5a47279a2f425d7c1505b60d0478d9a8~tplv-resize:480:0.png',series_name: '威馳',rank: 11,id: 538,min_price: 7.38,max_price: 9.48,type: 3,},{count: 50048,image: 'http://p6-dcd.byteimg.com/img/motor-mis-img/28d677a5f94a5a24103f088dd94c8515~tplv-resize:480:0.png',series_name: '朗逸',rank: 12,id: 393,min_price: 7.2,max_price: 11.39,type: 1,},{count: 50569,image: 'http://p3-dcd.byteimg.com/img/motor-mis-img/44c013067df2032cc03b6031eb68bf05~tplv-resize:480:0.png',series_name: '速騰',rank: 13,id: 414,min_price: 9.19,max_price: 13.69,type: 1,},{count: 51377,image: 'http://p9-dcd.byteimg.com/img/motor-mis-img/89991e9322440768e5f67b551d6e7ee5~tplv-resize:480:0.png',series_name: '邁騰',rank: 14,id: 415,min_price: 14.79,max_price: 21.49,type: 4,},{count: 52486,image: 'http://p1-dcd.byteimg.com/img/motor-mis-img/71bb241f24d3e20b2ee3adca8b6559fe~tplv-resize:480:0.png',series_name: '比亞迪e1',rank: 15,id: 3174,min_price: 5.99,max_price: 7.99,type: 2,},{count: 53098,image: 'http://p9-dcd.byteimg.com/img/tos-cn-i-dcdx/f5483079e6094fb898c14f3b3d6c1493~tplv-resize:480:0.png',series_name: '軒逸',rank: 16,id: 1145,min_price: 6.98,max_price: 14.19,type: 1,},{count: 54326,image: 'http://p6-dcd.byteimg.com/img/motor-mis-img/0d4b71e7270960f73f1e9370febad7cc~tplv-resize:480:0.png',series_name: 'YARiS L 致炫',rank: 17,id: 533,min_price: 6.88,max_price: 10.88,type: 3,},{count: 55067,image: 'http://p3-dcd.byteimg.com/img/tos-cn-i-dcdx/287e133f10e1402386d901c399885fbf~tplv-resize:480:0.png',series_name: '五菱宏光MINIEV',rank: 18,id: 4499,min_price: 2.98,max_price: 9.99,type: 2,},{count: 56234,image: 'http://p1-dcd.byteimg.com/img/motor-mis-img/69904c721ef8a45afecf7d777a1806ef~tplv-resize:480:0.png',series_name: 'MINI',rank: 19,id: 38,min_price: 18.98,max_price: 34.33,type: 3,},{count: 58973,image: 'http://p9-dcd.byteimg.com/img/tos-cn-i-dcdx/01ea2955a1cb44ff8f048e3deabf2c17~tplv-resize:480:0.png',series_name: '雅閣',rank: 20,id: 289,min_price: 12.58,max_price: 17.48,type: 4,},
]

界面結構和邏輯代碼

import { Car, carList } from '../models/CarData'
@Entry
@Component
struct Page11_carHome {// 篩選條件filterList = ['全部', '緊湊型車', '微型車', '小型車', '中型車',]//篩選車型的默認高亮下標@State filterListActiveIndex: number = 0// 排序條件sortList = ['熱度', '價格', '銷量']//每種車型的(熱度, 價格, 銷量)篩選默認的高亮@State sortListActiveIndex: number = 0//汽車列表篩@State carList: Car[] = carList//汽車的列表@State scaleX: number = 1@State scaleY: number = 1// 獲取當前時間(年月日)getTime() {const date: Date = new Date()const year = date.getFullYear()const month = date.getMonth() + 1const day = date.getDate()return `${year}年${month}月${day}日`}build() {Column() {// 頂部區域Stack() {Text('汽車之家排行榜').fontSize(18)Row({ space: 5 }) {Image($r('app.media.ic_public_arrow_left')).width(25)Blank()Image($r('app.media.ic_public_share')).width(25)Image($r('app.media.ic_public_question')).width(25)}.width('100%').padding(10)}Scroll() {Row({ space: 10 }) {// 篩選條件['全部', '緊湊型車', '微型車', '小型車', '中型車',]ForEach(this.filterList, (item: string, index: number) => {Text(item).fontColor(this.filterListActiveIndex === index ? Color.Red : '#595B5D').backgroundColor('#ccc').borderRadius(5).padding({top: 5,bottom: 5,left: 8,right: 8}).fontSize(14).onClick(() => {this.filterListActiveIndex = index// 注釋的有誤//   //  車的類型//   if (item === '全部') {//     this.carList = carList.filter((ele: Car, index: number) => {//       return true//     })//   }//   else {//     this.carList = carList.filter((ele: Car, index: number) => {//       if (item === '緊湊車型') {//         return  ele.type===1//       } else if (item === '微型車') {//         return  ele.type===2//       } else if (item === '小型車') {//         return  ele.type===3//       } else {//         return  ele.type===4//       }//     })//   }// //   篩選//   this.carListthis.carList = carList.filter((ele: Car, index) => {return item === '全部' ? true : ele.type === this.filterListActiveIndex})})})}.height(50).margin({left: 5,right: 5,bottom: 8}).border({ width: { bottom: 1 }, color: '#ccc' })}.height(50).scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off)// 排序條件(自己實現)Row() {Text(this.getTime())//時間(年月日顯示).fontColor('#6D7177')Row({ space: 8 }) {// ['熱度', '價格', '銷量']ForEach(this.sortList, (item: string, index: number) => {Text(item).fontColor(this.sortListActiveIndex === index ? Color.Red : Color.Black).onClick(() => {this.sortListActiveIndex = index//列表的篩選this.carList =this.carList.sort((a: Car, b: Car) => {if (this.sortListActiveIndex === 0) {// 熱度升序return a.rank - b.rank} else if (this.sortListActiveIndex === 1) {// 價格降序return (a.max_price - a.min_price) - (b.max_price - b.min_price)} else {//   銷量降序return b.count - a.count}})})})}}.width('100%').justifyContent(FlexAlign.SpaceBetween).padding({top: 15,left: 10,right: 10,bottom: 15})// 列表區域(自己實現)List({ space: 10 }) {ForEach(this.carList, (item: Car, index: number) => {ListItem() {Row({ space: 8 }) {if (index === 0) {Image($r('app.media.ic_homework_first')).width(40)} else if (index == 1) {Image($r('app.media.ic_homework_second')).width(40)} else if (index === 2) {Image($r('app.media.ic_homework_third')).width(40)} else {Text((index + 1).toString()).fontSize(25)}Image(item.image).width(100).syncLoad(true)Column({ space: 10 }) {Text(item.series_name)Text(item.min_price.toFixed(2) + '-' + item.max_price.toFixed(2) + '萬').fontColor(Color.Orange).fontSize(15)}.height('100%').layoutWeight(1).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Start)Column({ space: 6 }) {Text(item.count.toString()).fontWeight(700)Text('全國銷量').fontColor('#67696C').fontSize(13)Text('詢底價').backgroundColor('#027DFF').padding(5).borderRadius(3).fontColor('#fff').scale({ x: this.scaleX, y: this.scaleY }).onAppear(() => {this.scaleX = 1.1this.scaleY = 1.1}).animation({iterations: -1,playMode: PlayMode.AlternateReverse})}}}.width('100%').height(110)})}.width('100%').padding({ left: 10, right: 10 }).divider({strokeWidth: 1,color: '#ccc'}).scrollBar(BarState.Off)}.width('100%').height('100%')}
}

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/919734.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/919734.shtml
英文地址,請注明出處:http://en.pswp.cn/news/919734.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

雙重機器學習DML介紹

本文參考: [1]文心一言回答; 一、核心原理與數學框架 雙重機器學習(Double Machine Learning, DML)由Chernozhukov等學者于2018年提出,是一種結合機器學習與傳統計量經濟學的因果推斷框架。其核心目標是在高維數據和非…

【圖像算法 - 21】慧眼識蟲:基于深度學習與OpenCV的農田害蟲智能識別系統

摘要: 在現代農業生產中,病蟲害是影響作物產量和品質的關鍵因素之一。傳統的害蟲識別依賴人工巡查,效率低、成本高且易出錯。本文將介紹如何利用深度學習與OpenCV構建一套高效的農田害蟲智能識別系統。該系統能夠自動識別10類常見農業害蟲&a…

循環神經網絡實戰:GRU 對比 LSTM 的中文情感分析(三)

循環神經網絡實戰:GRU 對比 LSTM 的中文情感分析(三) 文章目錄循環神經網絡實戰:GRU 對比 LSTM 的中文情感分析(三)前言數據準備(與 LSTM 相同)模型搭建(GRU)…

學習游戲制作記錄(制作提示框以及使用鍵盤切換UI)8.21

1.制作裝備提示框創建提示框,添加文本子對象,用來描述名稱,類型以及屬性加成掛載垂直分配組件和文本大小適配組件,這樣圖像會根據文本大小來調整自己創建UI_ItemTip腳本并掛載在文本框上:[SerializeField] private Tex…

chapter07_初始化和銷毀方法

一、簡介 一個Bean,在進行實例化之后,需要進行兩種初始化 初始化屬性,由PropertyValues進行賦值初始化方法,由ApplicationContext統一調用,例如加載配置文件 Bean的初始化與銷毀,共有三種方式(注…

open webui源碼分析6-Function

一、Functions簡介 可以把Tools作為依賴于外部服務的插件,Functions就是內部插件,二者都是用來增強open webui的能力的。Functions是輕量的,高度可定制的,并且是用純Python編寫的,所以你可以自由地創建任何東西——從新…

C2039 “unref“:不是“osgEarth::Symbology::Style”的成員 問題分析及解決方法

在osgEarth2.10中實現多線段連續測量功能時,遇到下圖中的錯誤; 經過測試和驗證,主要問題出現在下圖圈出代碼的定義上 圖22-1 對于22-1中的兩個變量這樣定義是錯誤的。因為Style類沒有繼承自osg::Referenced,因此不能與osg::ref_ptr配合使用

GitHub 熱榜項目 - 日榜(2025-08-19)

GitHub 熱榜項目 - 日榜(2025-08-19) 生成于:2025-08-19 統計摘要 共發現熱門項目:12 個 榜單類型:日榜 本期熱點趨勢總結 本期GitHub熱榜呈現三大技術熱點:1)AI原生開發持續爆發,Archon OS、Parlant等…

ingress 配置ssl證書

模擬環境舉例&#xff1a; # 生成帶 OU 的證書配置文件 cat > csr.conf <<EOF [ req ] default_bits 2048 prompt no default_md sha256 distinguished_name dn[ dn ] C CN ST Beijing L Beijing O YourCompany, Inc. # 組織名稱 (必填) OU DevOps De…

Pandas 合并數據集:concat 和 append

文章目錄Pandas 合并數據集&#xff1a;concat 和 append回顧&#xff1a;NumPy 數組的拼接使用 pd.concat 進行簡單拼接重復索引將重復索引視為錯誤忽略索引添加多級索引&#xff08;MultiIndex&#xff09;鍵使用連接&#xff08;Join&#xff09;方式拼接append 方法Pandas …

2025年5月架構設計師綜合知識真題回顧,附參考答案、解析及所涉知識點(七)

本文主要回顧2025年上半年(2025-5-24)系統架構設計師考試上午綜合知識科目的選擇題,同時附帶參考答案、解析和所涉知識點。 2025年5月架構設計師綜合知識真題回顧,附參考答案、解析及所涉知識點(一) 2025年5月架構設計師綜合知識真題回顧,附參考答案、解析及所涉知識點(…

面向RF設計人員的微帶貼片天線計算器

微帶貼片天線和陣列可能是僅次于單極天線和偶極天線的最簡單的天線設計。這些天線也很容易集成到PCB中&#xff0c;因此通常用于5G天線陣列和雷達等高級系統。這些天線陣列在基諧模式和高階模式下也遵循一組簡單的設計方程&#xff0c;因此您甚至可以在不使用仿真工具的情況下設…

明基RD280U編程顯示器深度測評:碼農的「第二塊鍵盤」竟然會發光?

文章目錄前言一、開箱篇&#xff1a;當理工男遇到「俄羅斯套娃式包裝」二、外觀篇&#xff1a;深空灰的「代碼容器」1. 桌面變形記2. 保護肩頸的人體工學設計三、顯示篇&#xff1a;給代碼做「光子嫩膚」1. 28寸超大大屏 3:2屏比 4K超清2.專業編程模式&#xff0c;讓代碼一目…

算法114. 二叉樹展開為鏈表

題目&#xff1a;給你二叉樹的根結點 root &#xff0c;請你將它展開為一個單鏈表&#xff1a; 展開后的單鏈表應該同樣使用 TreeNode &#xff0c;其中 right 子指針指向鏈表中下一個結點&#xff0c;而左子指針始終為 null 。 展開后的單鏈表應該與二叉樹 先序遍歷 順序相同。…

智慧能源管理系統:點亮山東零碳園區的綠色引擎

一、概述在全球積極踐行“雙碳”目標的時代浪潮下&#xff0c;山東作為經濟大省&#xff0c;正全力推動產業的綠色變革&#xff0c;零碳園區建設成為其中的關鍵一環。《山東省零碳園區建設方案》明確規劃&#xff0c;到2027年建成15個左右省級零碳園區 &#xff0c;到2030年進一…

分布式日志分析平臺(ELFK 與 EFK)理論

一、日志分析平臺核心概念在分布式系統中&#xff0c;日志是系統運行狀態監控、問題排查和業務分析的重要依據。隨著系統規模擴大&#xff0c;單機日志管理方式已無法滿足需求&#xff0c;分布式日志分析平臺應運而生。其核心目標是實現日志的集中收集、統一處理、高效存儲和可…

CoreShop微信小程序商城框架開啟多租戶-添加一個WPF客戶端以便進行本地操作--讀取店鋪信息(6)

本節內容&#xff0c;使用登錄的token進行店鋪信息讀取&#xff0c;順利的話&#xff0c;進行EXCEL上傳測試。 1。在后臺編寫 讀取店鋪信息代碼 1.1 查看原來鋪店信息在什么位置&#xff0c;店鋪的表格為CoreCmsStore#region 獲取列表// POST: Api/CoreCmsStore/GetPageList///…

UE5關卡藍圖能不能保存副本呀?

提問 關卡藍圖能不能保存副本呀&#xff1f; 回答 在 UE 里&#xff0c;“關卡藍圖&#xff08;Level Blueprint&#xff09;”本身其實是不能直接復制/保存成獨立資源的&#xff0c;因為它和具體的 **Level&#xff08;.umap 文件&#xff09;**是綁定的——相當于一個“場景腳…

機器學習數據預處理學習報告

一、學習背景與目的在機器學習流程中&#xff0c;數據預處理是保障模型訓練效果的關鍵環節。原始數據常存在缺失值、量綱不一致、特征格式不匹配等問題&#xff0c;直接影響模型對數據規律的學習。本次學習圍繞 Pandas 與 Scikit-learn&#xff08;sklearn&#xff09;工具庫&a…

git舊倉庫遷移到新倉庫

git舊倉庫遷移到新倉庫 A倉庫(舊倉庫)&#xff1a;git172.16.21.21:xxxx_software/Ni-Handler-Mgr.git B倉庫(新倉庫)&#xff1a;git172.16.11.11:yyyy/hostpc/ni-handler-mgr.git Step1 新建新倉庫 創建新 GitHub 倉庫? 在 GitHub 頁面點擊 “New repository”&#xff0c;命…