如果你也对鸿蒙感兴趣，可以加入班级，一起学习鸿蒙开发！

场景介绍

商品长按标记是购物比价类应用中高频使用场景之一，如用户在商品列表页面长按某商品，标记“不喜欢”、“不想要”、“购买过”、“查看相似商品”等。

本示例基于Grid布局和组合手势实现商品长按标记并随标记更新商品列表的功能，帮助用户过滤筛选商品。

效果预览

实现思路

1. 调用GestureGroup接口实现长按商品卡片弹出标记菜单栏组件，该组件通过Stack组件在商品卡片位置绘制标记菜单栏列表。
   1. // ProductCard.ets
   2. Image(this.product.imageUrl) // 商品图片（添加长按事件）
   3. .parallelGesture(GestureGroup(GestureMode.Exclusive,
   4. TapGesture({ count: 1, fingers: 1 })
   5. .onAction(() => {
   6. this.selectedProductId = 0
   7. }),
   8. LongPressGesture({ repeat: true })
   9. .onAction(() => {
   10. this.selectedProductId = this.product.id
   11. })
   12. ))
   13. if (this.selectedProductId === this.product.id) { // 长按覆层，只有选中时显示
   14. Stack() {...} // 半透明背景;菜单内容（定位到商品附近）
   15. .onClick(() => {
   16. this.selectedProductId = 0 // 点击覆盖层外部关闭
   17. })
   18. }
2. 在handleAction函数中处理被选中标记项，如用户标记为“不喜欢”时，在商品列表中隐藏或移除该商品。
   1. buildActionButton(text: string | Resource, action: string, imgUrl: Resource) { // 构建标记操作按钮
   2. Button() {...}
   3. .onClick(() => {
   4. this.handleAction(action)
   5. this.selectedProductId = 0
   6. })
   7. }
   8. private handleAction(action: string) {...} // 处理标记选项点击

约束与限制

• 本示例支持API Version 17 Release及以上版本。
• 本示例支持HarmonyOS 5.0.5 Release SDK及以上版本。
• 本示例需要使用DevEco Studio 5.0.5 Release及以上版本进行编译运行。

工程目录

1. ├──entry/src/main/ets // 代码区
2. │ ├──entryability
3. │ │ └──EntryAbility.ets // 程序入口
4. │ ├──entrybackupability
5. │ │ └──EntryBackupAbility.ets
6. │ ├──model
7. │ │ ├──BottomNavigation.ets // 底部导航栏组件
8. │ │ ├──Product.ets // 商品实例定义
9. │ │ ├──ProductCard.ets // 商品卡片组件
10. │ │ ├──SearchBar.ets // 搜索栏组件
11. │ │ └──TopMenuBar.ets // 顶部菜单栏组件
12. │ └──pages
13. │ ├──ItemListPage.ets // 主页面-商品列表页
14. │ └──SimilarItemsPage.ets // 相似商品页
15. └──entry/src/main/resources // 应用资源目录

参考文档

Grid

创建网格 (Grid/GridItem)

组合手势

@ohos.util.Stack（线性容器Stack）

代码下载

商品长按标记示例代码