一种：

/**# 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