ArKTS：List 數組

一種：

/**# encoding: utf-8# 版權所有  2025 ?涂聚文有限公司? ?# 許可信息查看：言語成了邀功盡責的功臣，還需要行爲每日來值班嗎# 描述： 數組# Author    : geovindu,Geovin Du 涂聚文.# IDE       : DevEco Studio 5.1.1  HarmonyOS# os        : windows 10# database  : mysql 9.0 sql server 2019, postgreSQL 17.0  Oracle 21c Neo4j# Datetime  : 2025/7/27 20:13# User      :  geovindu# Product   : DevEco Studio# Project   : MyApplication# File      : ListPage.ets**/
@Entry
@Component
struct ListPage {@State message: string = 'Hello World';@State cc:number=0@State ls:string[][]=[['墜飾', '戒指', '對戒', '項鏈', '吊墜', '耳釘', '手鐲', '手鏈', '串飾', '擺件'],['DiaBling', ' Shimmering', 'Fortune', 'Snake', 'Heirloom', 'HexiconHot', 'Beloved', 'Wedding', 'Love', 'Beauty'],['人氣爆款', '鉆光影金', '金蛇獻寶', '福滿傳家', '悅己愛己', '天天愛上新', '愛很美', '婚嫁', '囍愛', 'Goldstyle'],['Hexicon', 'Your Style', 'Dear Q', '玄酷', '抱抱家庭', '娉婷', 'E意大利', '銀飾間<', '金龍獻福', '寶爵']]//分組的數據封裝數組@State nameList: string[] = ['黃金','鉆石', '珍珠', '寶銀']@Builder itemHead(headName: string){Text(headName).fontSize(20).fontWeight(600).width('100%').backgroundColor('#ffb0adad').padding(10)}//設置下標變量private listScroller: Scroller = new Scroller()build() {//層疊布局，里面的元素不做處理，會疊在一起//設置位置在底部Stack({alignContent: Alignment.BottomEnd}){Image($r('app.media.list_item_top_icon')).width(50).height(50)//設置在層疊布局展示的順序.zIndex(1).backgroundColor('#ffe7e3e3').padding(10)//內邊距.margin({right: 40,bottom: 20}).borderRadius(50)//組件添加線條.border({width: 1,color: '#ffb7b4b4'}).onClick(() => {//點擊向上箭頭的圖標，實現邏輯操作,通過點擊圖片實現修好list組件的下標，改為0this.listScroller.scrollToIndex(0)})//注意：如果要實現回到頂部公共，學要進行綁定操作List({scroller: this.listScroller}){ForEach(this.nameList,(ithead:string,index:number)=>{ListItemGroup({header:this.itemHead(ithead)}){ForEach(this.ls[index],(item: string) => {ListItem(){Text(item).fontSize(20).height(100)}})}.divider({strokeWidth: 1,color: Color.Gray})})}//添加粘性標題.sticky(StickyStyle.Header).alignListItem(ListItemAlign.Center).scrollBar(BarState.Auto).scrollBarColor(Color.Orange).scrollBarWidth(10)}.width('100%').height('100%')}}

二種：

/**# encoding: utf-8# 版權所有  2025 ?涂聚文有限公司? ?# 許可信息查看：言語成了邀功盡責的功臣，還需要行爲每日來值班嗎# 描述：# Author    : geovindu,Geovin Du 涂聚文.# IDE       : DevEco Studio 5.1.1  HarmonyOS# os        : windows 10# database  : mysql 9.0 sql server 2019, postgreSQL 17.0  Oracle 21c Neo4j# Datetime  : 2025/7/27 22:21# User      :  geovindu# Product   : DevEco Studio# Project   : MyApplication# File      : AllGroups.ets**/
/*** AllGroups.ets 類別*/
export class AllGroups {id: number = 0;title: string = '';isSpecial: boolean = false;constructor(id: number, title: string, isSpecial: boolean) {this.id = id;this.title = title;this.isSpecial = isSpecial;}
}/**# encoding: utf-8# 版權所有  2025 ?涂聚文有限公司? ?# 許可信息查看：言語成了邀功盡責的功臣，還需要行爲每日來值班嗎# 描述：ArKTS# Author    : geovindu,Geovin Du 涂聚文.# IDE       : DevEco Studio 5.1.1  HarmonyOS# os        : windows 10# database  : mysql 9.0 sql server 2019, postgreSQL 17.0  Oracle 21c Neo4j# Datetime  : 2025/7/27 20:35# User      :  geovindu# Product   : DevEco Studio# Project   : MyApplication# File      : GoldInfo.ets**//*** GoldInfo.ets 金信息*/
export class GoldInfo {id: number = 0 //數據庫表自增主鍵idName: string = ''group: number = 0//員工IDconstructor(id: number, Name: string, group: number) {this.id = idthis.Name = Namethis.group = group}
}/**# encoding: utf-8# 版權所有  2025 ?涂聚文有限公司? ?# 許可信息查看：言語成了邀功盡責的功臣，還需要行爲每日來值班嗎# 描述： 數組# Author    : geovindu,Geovin Du 涂聚文.# IDE       : DevEco Studio 5.1.1  HarmonyOS# os        : windows 10# database  : mysql 9.0 sql server 2019, postgreSQL 17.0  Oracle 21c Neo4j# Datetime  : 2025/7/27 20:13# User      :  geovindu# Product   : DevEco Studio# Project   : MyApplication# File      : ListPage.ets**/
import { faceDetector } from '@kit.CoreVisionKit';
import { AllGroups } from '../models/AllGroups'
import {  GoldInfo } from '../models/GoldInfo'
@Entry
@Component
struct ListPage {@Builder itemHead(headName: string) {Text(headName).fontSize(20).fontWeight(FontWeight.Bold).width('100%').backgroundColor('#ffb0adad').padding(10);}private listScroller: Scroller = new Scroller();// 分組信息數據private groups: AllGroups[] = [new AllGroups(1, '黃金', false),new AllGroups(2, '鉆石', false),new AllGroups(3, '珍珠', false),new AllGroups(4, '寶銀', false)];// 商品數據private listgold: GoldInfo[] = [new GoldInfo(1, 'Beauty', 1),new GoldInfo(2, '愛很美', 1),new GoldInfo(3, '婚嫁', 1),new GoldInfo(4, 'HexiconHot', 2),new GoldInfo(5, 'Love', 2),new GoldInfo(6, '墜飾', 1),new GoldInfo(7, '對戒', 1),new GoldInfo(8, '項鏈', 1),new GoldInfo(9, 'DiaBling', 2),new GoldInfo(10, 'Shimmering', 2),new GoldInfo(11, 'Fortune', 2),new GoldInfo(12, '人氣爆款', 3),new GoldInfo(13, '鉆光影金', 3),new GoldInfo(14, '金蛇獻寶', 3),new GoldInfo(15, '抱抱家庭', 4),new GoldInfo(16, '娉婷', 4),new GoldInfo(17, '銀飾間', 4),new GoldInfo(18, '金蛇獻寶', 3),new GoldInfo(19, '囍愛', 3),new GoldInfo(20, '耳釘', 4),new GoldInfo(21, '手鐲', 4),new GoldInfo(22, '手鏈串', 4),new GoldInfo(23, '人氣爆款', 3),new GoldInfo(24, '鉆光影金', 3),new GoldInfo(25, '金蛇獻寶', 3),new GoldInfo(26, '抱抱家庭', 4),new GoldInfo(27, '銀飾間', 4),new GoldInfo(28, '飾擺件', 1),new GoldInfo(29, '實體黃金擺件', 2),new GoldInfo(30, 'Goldstyle', 2),];/*** 根據分組ID獲取該組所有項目*/private getItemsByGroup(groupId: number): GoldInfo[] {return this.listgold.filter(item => item.group === groupId);}build() {Column() {// 頁面標題Text("珠寶分類列表").fontSize(24).fontWeight(FontWeight.Bold).padding(16).width('100%').textAlign(TextAlign.Center).backgroundColor('#f0f0f0');//層疊布局，里面的元素不做處理，會疊在一起//設置位置在底部Stack({alignContent: Alignment.BottomEnd}) {Image($r('app.media.list_item_top_icon')).width(50).height(50)//設置在層疊布局展示的順序.zIndex(1).backgroundColor('#ffe7e3e3').padding(10)//內邊距.margin({ right: 40, bottom: 20 }).borderRadius(50)//組件添加線條.border({ width: 1, color: '#ffb7b4b4' }).onClick(() => {//點擊向上箭頭的圖標，實現邏輯操作,通過點擊圖片實現修好list組件的下標，改為0this.listScroller.scrollToIndex(0)})// 列表容器，確保占滿剩余空間List({ scroller: this.listScroller }) {ForEach(this.groups, (group: AllGroups, index: number = group.id) => {ListItemGroup({ header: this.itemHead(group.title) }) {ForEach(this.getItemsByGroup(group.id), (item: GoldInfo) => {ListItem() {Text(item.Name)}})}.divider({ strokeWidth: 1, color: Color.Gray })})}.padding(16).listDirection(Axis.Vertical).divider({strokeWidth: 1,color: '#EEEEEE',startMargin: 16,endMargin: 16})//添加粘性標題.sticky(StickyStyle.Header).alignListItem(ListItemAlign.Center).scrollBar(BarState.Auto).scrollBarColor(Color.Orange).scrollBarWidth(10).backgroundColor('#ffffff').borderRadius(10).layoutWeight(1); // 使用layoutWeight確保列表占據可用空間}}.width('100%').height('100%') // 確保根容器占滿屏幕.backgroundColor('#F5F5F5');}
}

三種：

/**# encoding: utf-8# 版權所有  2025 ?涂聚文有限公司? ?# 許可信息查看：言語成了邀功盡責的功臣，還需要行爲每日來值班嗎# 描述：# Author    : geovindu,Geovin Du 涂聚文.# IDE       : DevEco Studio 5.1.1  HarmonyOS# os        : windows 10# database  : mysql 9.0 sql server 2019, postgreSQL 17.0  Oracle 21c Neo4j# Datetime  : 2025/7/27 22:21# User      :  geovindu# Product   : DevEco Studio# Project   : MyApplication# File      : AllGroups.ets**/
/*** AllGroups.ets 類別*/
export class AllGroups {private id: number = 0;private title: string= '';private isSpecial: boolean = false;/*** AllGroups.ets* @param id* @param title* @param isSpecial*/constructor(id: number, title: string, isSpecial: boolean) {this.id = id;this.title = title;this.isSpecial = isSpecial;}/*** Id* @param value*/set Id(value: number) {this.id = value;}/***Id* @returns*/get Id(): number {return this.id;}/***名稱* @param value*/set Title(value: string) {this.title = value;}/***名稱* @returns*/get Title(): string {return this.title;}/*** 是否特別* @param value*/set IsSpecial(value: boolean) {this.isSpecial = value;}/***是否特別* @returns*/get IsSpecial(): boolean {return this.isSpecial;}}/**# encoding: utf-8# 版權所有  2025 ?涂聚文有限公司? ?# 許可信息查看：言語成了邀功盡責的功臣，還需要行爲每日來值班嗎# 描述：ArKTS# Author    : geovindu,Geovin Du 涂聚文.# IDE       : DevEco Studio 5.1.1  HarmonyOS# os        : windows 10# database  : mysql 9.0 sql server 2019, postgreSQL 17.0  Oracle 21c Neo4j# Datetime  : 2025/7/27 20:35# User      :  geovindu# Product   : DevEco Studio# Project   : MyApplication# File      : GoldInfo.ets**//*** GoldInfo.ets 金信息*/
export class GoldInfo {private id: number = 0 //數據庫表自增主鍵idprivate name: string = ''private group: number = 0/*** 構造函數* @param id* @param name* @param group*/constructor(id: number, name: string, group: number) {this.id = idthis.name = namethis.group = group}/**** @param value*/set Id(value: number) {this.id = value;}/**** @returns*/get Id(): number {return this.id;}/**** @param value*/get Name(): string {return this.name;}/**** @param value*/set Name(value: string) {this.name = value;}/**** @param value*/set Group(value: number) {this.group = value;}/**** @returns*/get Group(): number {return this.group;}
}/**# encoding: utf-8# 版權所有  2025 ?涂聚文有限公司? ?# 許可信息查看：言語成了邀功盡責的功臣，還需要行爲每日來值班嗎# 描述：# Author    : geovindu,Geovin Du 涂聚文.# IDE       : DevEco Studio 5.1.1  HarmonyOS# os        : windows 10# database  : mysql 9.0 sql server 2019, postgreSQL 17.0  Oracle 21c Neo4j# Datetime  : 2025/7/28 1:28# User      :  geovindu# Product   : DevEco Studio# Project   : MyApplication# File      : GroupDAL.ets**/
import { AllGroups } from '../models/AllGroups'export class GroupDAL {/*** 獲取所有分組* @returns*/getAll(): Array<AllGroups> {// 創建并初始化AllGroups數組const groupInfo: Array<AllGroups> = [new AllGroups(1, '黃金', false),new AllGroups(2, '鉆石', false),new AllGroups(3, '珍珠', false),new AllGroups(4, '寶銀', false)];// 可以在這里添加更多業務邏輯，比如從數據庫獲取數據return groupInfo;}
}/**# encoding: utf-8# 版權所有  2025 ?涂聚文有限公司? ?# 許可信息查看：言語成了邀功盡責的功臣，還需要行爲每日來值班嗎# 描述：# Author    : geovindu,Geovin Du 涂聚文.# IDE       : DevEco Studio 5.1.1  HarmonyOS# os        : windows 10# database  : mysql 9.0 sql server 2019, postgreSQL 17.0  Oracle 21c Neo4j# Datetime  : 2025/7/28 1:10# User      :  geovindu# Product   : DevEco Studio# Project   : MyApplication# File      : GoldDAL.ets**/
import { GoldInfo } from '../models/GoldInfo'/****/export class GoldDAL{/*** 獲取所有金* @returns*/getAll(): Array<GoldInfo> {// 創建并初始化AllGroups數組const goldInfo: Array<GoldInfo> = [new GoldInfo(1, 'Beauty', 1),new GoldInfo(2, '愛很美', 1),new GoldInfo(3, '婚嫁', 1),new GoldInfo(4, 'HexiconHot', 2),new GoldInfo(5, 'Love', 2),new GoldInfo(6, '墜飾', 1),new GoldInfo(7, '對戒', 1),new GoldInfo(8, '項鏈', 1),new GoldInfo(9, 'DiaBling', 2),new GoldInfo(10, 'Shimmering', 2),new GoldInfo(11, 'Fortune', 2),new GoldInfo(12, '人氣爆款', 3),new GoldInfo(13, '鉆光影金', 3),new GoldInfo(14, '金蛇獻寶', 3),new GoldInfo(15, '抱抱家庭', 4),new GoldInfo(16, '娉婷', 4),new GoldInfo(17, '銀飾間', 4),new GoldInfo(18, '金蛇獻寶', 3),new GoldInfo(19, '囍愛', 3),new GoldInfo(20, '耳釘', 4),new GoldInfo(21, '手鐲', 4),new GoldInfo(22, '手鏈串', 4),new GoldInfo(23, '人氣爆款', 3),new GoldInfo(24, '鉆光影金', 3),new GoldInfo(25, '金蛇獻寶', 3),new GoldInfo(26, '抱抱家庭', 4),new GoldInfo(27, '銀飾間', 4),new GoldInfo(28, '飾擺件', 1),new GoldInfo(29, '實體黃金擺件', 2),new GoldInfo(30, 'Goldstyle', 2),];// 可以在這里添加更多業務邏輯，比如從數據庫獲取數據return goldInfo;}}/**# encoding: utf-8# 版權所有  2025 ?涂聚文有限公司? ?# 許可信息查看：言語成了邀功盡責的功臣，還需要行爲每日來值班嗎# 描述： 數組# Author    : geovindu,Geovin Du 涂聚文.# IDE       : DevEco Studio 5.1.1  HarmonyOS# os        : windows 10# database  : mysql 9.0 sql server 2019, postgreSQL 17.0  Oracle 21c Neo4j# Datetime  : 2025/7/27 20:13# User      :  geovindu# Product   : DevEco Studio# Project   : MyApplication# File      : ListPage.ets**/
import { faceDetector } from '@kit.CoreVisionKit';
import { GoldDAL } from '../DAL/GoldDAL'
import {  GroupDAL } from '../DAL/GroupDAL'
import { AllGroups } from '../models/AllGroups'
import { GoldInfo } from '../models/GoldInfo'@Entry
@Component
struct ListPage {@Builder itemHead(headName: string) {Text(headName).fontSize(20).fontWeight(FontWeight.Bold).width('100%').backgroundColor('#ffb0adad').padding(10);}private listScroller: Scroller = new Scroller();// 分組信息數據private groups:AllGroups[] = new GroupDAL().getAll();// 商品數據private listgold: GoldInfo[] =new GoldDAL().getAll();/*** 根據分組ID獲取該組所有項目*/private getItemsByGroup(groupId: number): GoldInfo[] {return this.listgold.filter(item => item.Group === groupId);}build() {Column() {// 頁面標題Text("珠寶分類列表").fontSize(24).fontWeight(FontWeight.Bold).padding(16).width('100%').textAlign(TextAlign.Center).backgroundColor('#f0f0f0');//層疊布局，里面的元素不做處理，會疊在一起//設置位置在底部Stack({alignContent: Alignment.BottomEnd}) {Image($r('app.media.list_item_top_icon')).width(50).height(50)//設置在層疊布局展示的順序.zIndex(1).backgroundColor('#ffe7e3e3').padding(10)//內邊距.margin({ right: 40, bottom: 20 }).borderRadius(50)//組件添加線條.border({ width: 1, color: '#ffb7b4b4' }).onClick(() => {//點擊向上箭頭的圖標，實現邏輯操作,通過點擊圖片實現修好list組件的下標，改為0this.listScroller.scrollToIndex(0)})// 列表容器，確保占滿剩余空間List({ scroller: this.listScroller }) {ForEach(this.groups, (group: AllGroups, index: number = group.Id) => {ListItemGroup({ header: this.itemHead(group.Title) }) {ForEach(this.getItemsByGroup(group.Id), (item: GoldInfo) => {ListItem() {Text(item.Name)}})}.divider({ strokeWidth: 1, color: Color.Gray })})}.padding(16).listDirection(Axis.Vertical).divider({strokeWidth: 1,color: '#EEEEEE',startMargin: 16,endMargin: 16})//添加粘性標題.sticky(StickyStyle.Header).alignListItem(ListItemAlign.Center).scrollBar(BarState.Auto).scrollBarColor(Color.Orange).scrollBarWidth(10).backgroundColor('#ffffff').borderRadius(10).layoutWeight(1); // 使用layoutWeight確保列表占據可用空間}}.width('100%').height('100%') // 確保根容器占滿屏幕.backgroundColor('#F5F5F5');}
}

四種：

/**# encoding: utf-8# 版權所有  2025 ?涂聚文有限公司? ?# 許可信息查看：言語成了邀功盡責的功臣，還需要行爲每日來值班嗎# 描述：# Author    : geovindu,Geovin Du 涂聚文.# IDE       : DevEco Studio 5.1.1  HarmonyOS# os        : windows 10# database  : mysql 9.0 sql server 2019, postgreSQL 17.0  Oracle 21c Neo4j# Datetime  : 2025/7/27 22:21# User      :  geovindu# Product   : DevEco Studio# Project   : MyApplication# File      : AllGroups.ets**/
/*** AllGroups.ets 類別*/
export class AllGroups {private id: number = 0;private title: string= '';private isSpecial: boolean = false;/*** AllGroups.ets* @param id* @param title* @param isSpecial*/constructor(id?: number, title?: string, isSpecial?: boolean) {if (id) this.id = id;if (title) this.title = title;if (isSpecial !== undefined) this.isSpecial = isSpecial;}/*** Id* @param value*/set Id(value: number) {this.id = value;}/***Id* @returns*/get Id(): number {return this.id;}/***名稱* @param value*/set Title(value: string) {this.title = value;}/***名稱* @returns*/get Title(): string {return this.title;}/*** 是否特別* @param value*/set IsSpecial(value: boolean) {this.isSpecial = value;}/***是否特別* @returns*/get IsSpecial(): boolean {return this.isSpecial;}}/**# encoding: utf-8# 版權所有  2025 ?涂聚文有限公司? ?# 許可信息查看：言語成了邀功盡責的功臣，還需要行爲每日來值班嗎# 描述：ArKTS# Author    : geovindu,Geovin Du 涂聚文.# IDE       : DevEco Studio 5.1.1  HarmonyOS# os        : windows 10# database  : mysql 9.0 sql server 2019, postgreSQL 17.0  Oracle 21c Neo4j# Datetime  : 2025/7/27 20:35# User      :  geovindu# Product   : DevEco Studio# Project   : MyApplication# File      : GoldInfo.ets**//*** GoldInfo.ets 金信息*/
export class GoldInfo {private id: number = 0 //數據庫表自增主鍵idprivate name: string = ''private group: number = 0/*** 構造函數* @param id* @param name* @param group*/constructor(id?: number, name?: string, group?: number) {if (id) this.id = idif (name) this.name = nameif (group) this.group = group}/**** @param value*/set Id(value: number) {this.id = value;}/**** @returns*/get Id(): number {return this.id;}/**** @param value*/get Name(): string {return this.name;}/**** @param value*/set Name(value: string) {this.name = value;}/**** @param value*/set Group(value: number) {this.group = value;}/**** @returns*/get Group(): number {return this.group;}
}/**# encoding: utf-8# 版權所有  2025 ?涂聚文有限公司? ?# 許可信息查看：言語成了邀功盡責的功臣，還需要行爲每日來值班嗎# 描述：# Author    : geovindu,Geovin Du 涂聚文.# IDE       : DevEco Studio 5.1.1  HarmonyOS# os        : windows 10# database  : mysql 9.0 sql server 2019, postgreSQL 17.0  Oracle 21c Neo4j# Datetime  : 2025/7/28 1:10# User      :  geovindu# Product   : DevEco Studio# Project   : MyApplication# File      : GoldDAL.ets**/
import { GoldInfo } from '../models/GoldInfo'/****/export class GoldDAL{/*** 獲取所有金* @returns*/getAll(): Array<GoldInfo> {/*// 創建并初始化AllGroups數組const goldInfo: Array<GoldInfo> = [new GoldInfo(1, 'Beauty', 1),new GoldInfo(2, '愛很美', 1),new GoldInfo(3, '婚嫁', 1),new GoldInfo(4, 'HexiconHot', 2),new GoldInfo(5, 'Love', 2),new GoldInfo(6, '墜飾', 1),new GoldInfo(7, '對戒', 1),new GoldInfo(8, '項鏈', 1),new GoldInfo(9, 'DiaBling', 2),new GoldInfo(10, 'Shimmering', 2),new GoldInfo(11, 'Fortune', 2),new GoldInfo(12, '人氣爆款', 3),new GoldInfo(13, '鉆光影金', 3),new GoldInfo(14, '金蛇獻寶', 3),new GoldInfo(15, '抱抱家庭', 4),new GoldInfo(16, '娉婷', 4),new GoldInfo(17, '銀飾間', 4),new GoldInfo(18, '金蛇獻寶', 3),new GoldInfo(19, '囍愛', 3),new GoldInfo(20, '耳釘', 4),new GoldInfo(21, '手鐲', 4),new GoldInfo(22, '手鏈串', 4),new GoldInfo(23, '人氣爆款', 3),new GoldInfo(24, '鉆光影金', 3),new GoldInfo(25, '金蛇獻寶', 3),new GoldInfo(26, '抱抱家庭', 4),new GoldInfo(27, '銀飾間', 4),new GoldInfo(28, '飾擺件', 1),new GoldInfo(29, '實體黃金擺件', 2),new GoldInfo(30, 'Goldstyle', 2),];*/const goldInfo: Array<GoldInfo> = [];const newItem: GoldInfo = new GoldInfo(); // 聲明時直接初始化，更簡潔newItem.Id = 1;newItem.Name = 'Beauty';newItem.Group = 1;goldInfo.push(newItem);const newItem2: GoldInfo = new GoldInfo();newItem2.Id = 2;newItem2.Name = '愛很美';newItem2.Group = 1;goldInfo.push(newItem2);const newItem3: GoldInfo = new GoldInfo();newItem3.Id = 3;newItem3.Name = '婚嫁';newItem3.Group = 1;goldInfo.push(newItem3);const newItem4: GoldInfo = new GoldInfo();newItem4.Id = 4;newItem4.Name = 'HexiconHot';newItem4.Group = 2;goldInfo.push(newItem4);const newItem5: GoldInfo = new GoldInfo();newItem5.Id = 5;newItem5.Name = 'Love';newItem5.Group = 2;goldInfo.push(newItem5);const newItem6: GoldInfo = new GoldInfo();newItem6.Id = 6;newItem6.Name = '墜飾';newItem6.Group = 1;goldInfo.push(newItem6);const newItem7: GoldInfo = new GoldInfo();newItem7.Id = 7;newItem7.Name = '對戒';newItem7.Group = 1;goldInfo.push(newItem7);const newItem8: GoldInfo = new GoldInfo();newItem8.Id = 8;newItem8.Name = '項鏈';newItem8.Group = 1;goldInfo.push(newItem8);const newItem9: GoldInfo = new GoldInfo();newItem9.Id = 9;newItem9.Name = 'DiaBling';newItem9.Group = 2;goldInfo.push(newItem9);const newItem10: GoldInfo = new GoldInfo();newItem10.Id = 10;newItem10.Name = 'Shimmering';newItem10.Group = 2;goldInfo.push(newItem10);const newItem11: GoldInfo = new GoldInfo();newItem11.Id = 11;newItem11.Name = 'Fortune';newItem11.Group =2;goldInfo.push(newItem11);const newItem12: GoldInfo = new GoldInfo();newItem12.Id = 12;newItem12.Name = '人氣爆款';newItem12.Group = 3;goldInfo.push(newItem12);const newItem13: GoldInfo = new GoldInfo();newItem13.Id = 13;newItem13.Name = '鉆光影金';newItem13.Group = 3;goldInfo.push(newItem13);const newItem14: GoldInfo = new GoldInfo();newItem14.Id = 14;newItem14.Name = '金蛇獻寶';newItem14.Group = 3;goldInfo.push(newItem14);const newItem15: GoldInfo = new GoldInfo();newItem15.Id = 15;newItem15.Name = '抱抱家庭';newItem15.Group =4;goldInfo.push(newItem15);const newItem16: GoldInfo = new GoldInfo();newItem16.Id = 16;newItem16.Name = '娉婷';newItem16.Group = 4;goldInfo.push(newItem16);const newItem18: GoldInfo = new GoldInfo();newItem18.Id = 17;newItem18.Name = '銀飾間';newItem18.Group = 4;goldInfo.push(newItem18);const newItem17: GoldInfo = new GoldInfo();newItem17.Id = 18;newItem17.Name = '金蛇獻寶';newItem17.Group = 3;goldInfo.push(newItem17);const newItem19: GoldInfo = new GoldInfo();newItem19.Id = 19;newItem19.Name = '囍愛';newItem19.Group = 3;goldInfo.push(newItem19);const newItem20: GoldInfo = new GoldInfo();newItem20.Id = 20;newItem20.Name = '耳釘';newItem20.Group = 4;goldInfo.push(newItem20);const newItem21: GoldInfo = new GoldInfo();newItem21.Id = 21;newItem21.Name = '手鐲';newItem21.Group = 4;goldInfo.push(newItem21);const newItem22: GoldInfo = new GoldInfo();newItem22.Id = 22;newItem22.Name = '手鏈串';newItem22.Group = 4;goldInfo.push(newItem22);const newItem23: GoldInfo = new GoldInfo();newItem23.Id = 23;newItem23.Name = '人氣爆款';newItem23.Group = 3;goldInfo.push(newItem23);const newItem24: GoldInfo = new GoldInfo();newItem24.Id = 24;newItem24.Name = '鉆光影金';newItem24.Group = 3;goldInfo.push(newItem24);const newItem25: GoldInfo = new GoldInfo();newItem25.Id = 25;newItem25.Name = '金蛇獻寶';newItem25.Group = 3;goldInfo.push(newItem25);const newItem26: GoldInfo = new GoldInfo();newItem26.Id = 26;newItem26.Name = '抱抱家庭';newItem26.Group = 4;goldInfo.push(newItem26);const newItem27: GoldInfo = new GoldInfo();newItem27.Id = 27;newItem27.Name = '銀飾間';newItem27.Group = 4;goldInfo.push(newItem27);const newItem29: GoldInfo = new GoldInfo();newItem29.Id = 28;newItem29.Name = '飾擺件';newItem29.Group = 1;goldInfo.push(newItem29);const newItem28: GoldInfo = new GoldInfo();newItem28.Id = 29;newItem28.Name = '實體黃金擺件';newItem28.Group = 2;goldInfo.push(newItem28);const newItem30: GoldInfo = new GoldInfo();newItem30.Id = 30;newItem30.Name = 'Goldstyle';newItem30.Group = 2;goldInfo.push(newItem30);// 可以在這里添加更多業務邏輯，比如從數據庫獲取數據return goldInfo;}}/**# encoding: utf-8# 版權所有  2025 ?涂聚文有限公司? ?# 許可信息查看：言語成了邀功盡責的功臣，還需要行爲每日來值班嗎# 描述：# Author    : geovindu,Geovin Du 涂聚文.# IDE       : DevEco Studio 5.1.1  HarmonyOS# os        : windows 10# database  : mysql 9.0 sql server 2019, postgreSQL 17.0  Oracle 21c Neo4j# Datetime  : 2025/7/28 1:28# User      :  geovindu# Product   : DevEco Studio# Project   : MyApplication# File      : GroupDAL.ets**/
import { AllGroups } from '../models/AllGroups'export class GroupDAL {/*** 可行// 創建并初始化AllGroups數組const groupInfo: Array<AllGroups> = [new AllGroups(1, '黃金', false),new AllGroups(2, '鉆石', false),new AllGroups(3, '珍珠', false),new AllGroups(4, '寶銀', false)];*//*** 獲取所有分組* @returns*/getAll(): Array<AllGroups> {const groupInfo: Array<AllGroups> = [];const newItem: AllGroups = new AllGroups(); // 聲明時直接初始化，更簡潔newItem.Id = 1;newItem.Title = '黃金';newItem.IsSpecial = false;groupInfo.push(newItem);const newItem2: AllGroups = new AllGroups();newItem2.Id = 2;newItem2.Title = '鉆石';newItem2.IsSpecial = false;groupInfo.push(newItem2);const newItem3: AllGroups = new AllGroups();newItem3.Id = 3;newItem3.Title = '珍珠';newItem3.IsSpecial = false;groupInfo.push(newItem3);const newItem4: AllGroups = new AllGroups();newItem4.Id =4;newItem4.Title = '寶銀';newItem4.IsSpecial = false;groupInfo.push(newItem4);// 可以在這里添加更多業務邏輯，比如從數據庫獲取數據return groupInfo;}
}/**# encoding: utf-8# 版權所有  2025 ?涂聚文有限公司? ?# 許可信息查看：言語成了邀功盡責的功臣，還需要行爲每日來值班嗎# 描述： 數組# Author    : geovindu,Geovin Du 涂聚文.# IDE       : DevEco Studio 5.1.1  HarmonyOS# os        : windows 10# database  : mysql 9.0 sql server 2019, postgreSQL 17.0  Oracle 21c Neo4j# Datetime  : 2025/7/27 20:13# User      :  geovindu# Product   : DevEco Studio# Project   : MyApplication# File      : ListPage.ets**/
import { faceDetector } from '@kit.CoreVisionKit';
import { GoldDAL } from '../DAL/GoldDAL'
import {  GroupDAL } from '../DAL/GroupDAL'
import { AllGroups } from '../models/AllGroups'
import { GoldInfo } from '../models/GoldInfo'@Entry
@Component
struct ListPage {@Builder itemHead(headName: string) {Text(headName).fontSize(20).fontWeight(FontWeight.Bold).width('100%').backgroundColor('#ffb0adad').padding(10);}private listScroller: Scroller = new Scroller();//const dal = new GroupDAL();//const groups = dal.getAll(); // 此時groups會包含4個分組數據// 分組信息數據private groups:AllGroups[] = new GroupDAL().getAll();// 商品數據private listgold: GoldInfo[] =new GoldDAL().getAll();/*** 根據分組ID獲取該組所有項目*/private getItemsByGroup(groupId: number): GoldInfo[] {return this.listgold.filter(item => item.Group === groupId);}build() {Column() {// 頁面標題Text("珠寶分類列表").fontSize(24).fontWeight(FontWeight.Bold).padding(16).width('100%').textAlign(TextAlign.Center).backgroundColor('#f0f0f0');//層疊布局，里面的元素不做處理，會疊在一起//設置位置在底部Stack({alignContent: Alignment.BottomEnd}) {Image($r('app.media.list_item_top_icon')).width(50).height(50)//設置在層疊布局展示的順序.zIndex(1).backgroundColor('#ffe7e3e3').padding(10)//內邊距.margin({ right: 40, bottom: 20 }).borderRadius(50)//組件添加線條.border({ width: 1, color: '#ffb7b4b4' }).onClick(() => {//點擊向上箭頭的圖標，實現邏輯操作,通過點擊圖片實現修好list組件的下標，改為0this.listScroller.scrollToIndex(0)})// 列表容器，確保占滿剩余空間List({ scroller: this.listScroller }) {ForEach(this.groups, (group: AllGroups, index: number = group.Id) => {ListItemGroup({ header: this.itemHead(group.Title) }) {ForEach(this.getItemsByGroup(group.Id), (item: GoldInfo) => {ListItem() {Text(item.Name)}})}.divider({ strokeWidth: 1, color: Color.Gray })})}.padding(16).listDirection(Axis.Vertical).divider({strokeWidth: 1,color: '#EEEEEE',startMargin: 16,endMargin: 16})//添加粘性標題.sticky(StickyStyle.Header).alignListItem(ListItemAlign.Center).scrollBar(BarState.Auto).scrollBarColor(Color.Orange).scrollBarWidth(10).backgroundColor('#ffffff').borderRadius(10).layoutWeight(1); // 使用layoutWeight確保列表占據可用空間}}.width('100%').height('100%') // 確保根容器占滿屏幕.backgroundColor('#F5F5F5');}
}

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

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

相關文章

Spring Boot 3整合Spring AI實戰：9輪面試對話解析AI應用開發

Spring Boot 3整合Spring AI實戰：9輪面試對話解析AI應用開發

Spring Boot 3整合Spring AI實戰&#xff1a;9輪面試對話解析AI應用開發 第1輪&#xff1a;基礎配置與模型調用 周先生&#xff1a;cc&#xff0c;先聊聊Spring AI的基礎配置吧。如何在Spring Boot 3項目中集成Ollama&#xff1f; cc&#xff1a;我們可以通過OllamaConfig.java…
閱讀更多...
標準SQL語句示例

標準SQL語句示例

一、基礎操作1. 數據庫操作-- 1. 創建數據庫 CREATE DATABASE 數據庫名稱 CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;-- 2. 刪除數據庫 DROP DATABASE IF EXISTS 數據庫名稱;-- 3. 選擇數據庫 USE 數據庫名稱;-- 4. 顯示所有數據庫 SHOW DATABASES;-- 5. 查看數據庫創…
閱讀更多...
STM32-基本定時器

STM32-基本定時器

一.基本定時器簡介 STM32F1 系列共有 8 個定時器&#xff0c;分別為&#xff1a;基本定時器、通用定時器、高級定時器。基本定時器 TIM6 和 TIM7 是一個 16 位的只能向上計數的定時器&#xff0c;只能定時&#xff0c;沒有外部IO。 二.基本定時器功能 上圖為基本定時器的功能框…
閱讀更多...
ofd文件轉pdf

ofd文件轉pdf

主要后端使用Java實現&#xff0c;前端可隨意搭配http請求添加依賴&#xff1a;<!-- OFD解析與轉換庫 --><dependency><groupId>org.ofdrw</groupId><artifactId>ofdrw-converter</artifactId><version>1.17.9</version></…
閱讀更多...
4.應用層自定義協議與序列化

4.應用層自定義協議與序列化

1.應用層程序員寫的一個個解決我們實際問題, 滿足我們日常需求的網絡程序, 都是在應用層1.1再談“協議”協議是一種 "約定". socket api 的接口, 在讀寫數據時, 都是按 "字符串" 的方式來發送接收的. 如果我們要傳輸一些 "結構化的數據" 怎么辦呢…
閱讀更多...
【QT搭建opencv環境】

【QT搭建opencv環境】

本文參考以下文章&#xff1a; https://blog.csdn.net/weixin_43763292/article/details/112975207 https://blog.csdn.net/qq_44743171/article/details/124335100 使用軟件 QT 5.14.2下載地址&#xff1a;download.qt.io 選擇版本&#xff1a;Qt 5.14.2 Qt 5.14.2百度網盤鏈接…
閱讀更多...
golang--函數棧

golang--函數棧

一、函數棧的組成結構&#xff08;棧幀&#xff09; 每個函數調用對應一個棧幀&#xff0c;包含以下核心部分&#xff1a; 1. 參數區 (Arguments) 位置&#xff1a;棧幀頂部&#xff08;高地址端&#xff09;內容&#xff1a; 函數調用時傳入的參數按從右向左順序壓棧&#xff…
閱讀更多...
【FAQ】創建Dynamics 365 Sales環境

【FAQ】創建Dynamics 365 Sales環境

參考文章&#xff1a;5 分鐘內安裝 Dynamics 365 Sales 步驟 1&#xff1a;訪問 Power Platform 管理中心 導航到make.powerapps.com&#xff0c;然后點擊右上角的齒輪圖標。選擇管理中心&#xff0c;或者訪問aka.ms/ppac訪問 Power Platform 管理中心。 第 2 步&#xff1a…
閱讀更多...
【數據庫】使用Sql Server將分組后指定字段的行數據轉為一個字段顯示，并且以逗號隔開每個值，收藏不迷路

【數據庫】使用Sql Server將分組后指定字段的行數據轉為一個字段顯示，并且以逗號隔開每個值，收藏不迷路

大家好&#xff0c;我是全棧小5&#xff0c;歡迎來到《小5講堂》。 這是《Sql Server》系列文章&#xff0c;每篇文章將以博主理解的角度展開講解。 溫馨提示&#xff1a;博主能力有限&#xff0c;理解水平有限&#xff0c;若有不對之處望指正&#xff01; 目錄前言示例數據集數…
閱讀更多...
7.項目起步（1）

7.項目起步（1）

1&#xff0c;項目起步-初始化項目并使用git管理創建項目并精細化配置src目錄調整git 管理項目2項目起步-配置別名路徑聯想提示什么是別名路徑聯想提示如何進行配置 &#xff08;自動配置了&#xff09;{"compilerOptions" : {"baseUrl" : "./",…
閱讀更多...
【C++詳解】深入解析繼承 類模板繼承、賦值兼容轉換、派生類默認成員函數、多繼承與菱形繼承

【C++詳解】深入解析繼承 類模板繼承、賦值兼容轉換、派生類默認成員函數、多繼承與菱形繼承

文章目錄一、繼承概念二、繼承定義定義格式繼承后基類成員訪問方式的變化類模板的繼承三、基類和派?類間的轉換(賦值兼容轉換)四、繼承中的作用域隱藏規則兩道筆試常考題五、派生類的默認成員函數四個常見默認成員函數實現?個不能被繼承的類六、繼承與友元七、繼承與靜態成員…
閱讀更多...
加法器 以及ALU(邏輯算術單元)

加法器 以及ALU(邏輯算術單元)

加法器框架&#xff0c;首先介紹原理&#xff0c;然后引入一位加法器最后再引入多位加法器最后引入帶符號的加法器這一節涉及到的硬件電路的知識理解就好&#xff0c;實在看不懂就跳過&#xff0c;但是封裝以后的功能必須看懂。這是一個一般的加法過程涉及到的必要元素圖中已經…
閱讀更多...
設計模式實戰：自定義SpringIOC（親手實踐）

設計模式實戰：自定義SpringIOC（親手實踐）

上一篇&#xff1a;設計模式實戰&#xff1a;自定義SpringIOC&#xff08;理論分析&#xff09; 自定義SpringIOC&#xff08;親手實踐&#xff09; 上一篇文章&#xff0c;我們介紹了SpringIOC容器的核心組件及其作用&#xff0c;下面我們來動手仿寫一個SpringIOC容器&#…
閱讀更多...
力扣面試150(42/150)

力扣面試150(42/150)

7.28 20. 有效的括號 給定一個只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判斷字符串是否有效。 有效字符串需滿足&#xff1a; 左括號必須用相同類型的右括號閉合。左括號必須以正確的順序閉合。每個右括號都有一…
閱讀更多...
基于黑馬教程——微服務架構解析（二）：雪崩防護+分布式事務

基于黑馬教程——微服務架構解析（二）：雪崩防護+分布式事務

之前的兩篇文章我們介紹了微服務的基礎概念及其服務間通信機制。本篇將深入探討微服務的核心保障&#xff1a;服務保護與分布式事務。一、微服務保護問題描述&#xff1a; 在一個購物車的微服務中&#xff0c;倘若某一項服務&#xff08;服務A&#xff09;同一時刻訪問的數據十…
閱讀更多...
LeetCode: 429 N叉樹的層序遍歷

LeetCode: 429 N叉樹的層序遍歷

題目描述給定一個 N 叉樹&#xff0c;返回其節點值的層序遍歷&#xff08;即從左到右&#xff0c;逐層訪問每一層的所有節點&#xff09;。示例輸入格式&#xff08;層序序列化&#xff09;&#xff1a;輸入示意&#xff1a;1/ | \3 2 4/ \5 6輸出&#xff1a;[[1], [3,2,4…
閱讀更多...
使用phpstudy極簡快速安裝mysql

使用phpstudy極簡快速安裝mysql

使用 phpStudy 極簡快速安裝 MySQL 的完整指南&#xff1a; 一、phpStudy 簡介 phpStudy 是一款 Windows 平臺下的 PHP 環境集成包&#xff0c;包含&#xff1a; Apache/Nginx PHP 5.x-7.x MySQL 5.5-8.0 phpMyAdmin 二、安裝步驟 1. 下載安裝包 訪問官網下載&#xf…
閱讀更多...
git lfs使用

git lfs使用

apt install git lfs 或者下載二進制文件加到環境變量 https://github.com/git-lfs/git-lfs/releases git lfs install git lfs clone huggingface文件路徑 如果訪問不了hugggingface.co用hf-mirror.com替代&#xff0c;國內下載速度還是挺快的 先按照pip install modelscope m…
閱讀更多...
6、CentOS 9 安裝 Docker

6、CentOS 9 安裝 Docker

&#x1f433; CentOS 9 安裝 Docker 最全圖文教程&#xff08;含鏡像源優化與常見問題解決&#xff09;標簽&#xff1a;CentOS 9、Docker、容器技術、開發環境、國內鏡像源 適合讀者&#xff1a;后端開發、運維工程師、Linux 初學者&#x1f4cc; 前言 在 CentOS 9 上安裝 Do…
閱讀更多...
SystemV消息隊列揭秘：原理與實戰

SystemV消息隊列揭秘：原理與實戰

目錄 一、消息隊列的基本原理 1、基本概念 2、基本原理 3、消息類型的關鍵作用 4、重要特性總結 5、生命周期管理 6、典型應用場景 二、System V 消息隊列的內核數據結構 1、消息隊列的管理結構 msqid_ds&#xff08;消息隊列標識符結構&#xff09; 關鍵字段解析 2…
閱讀更多...
最新文章

Copyright @ 2022~2023