鸿蒙 ArkUI 技巧实战：把商品分类页的“双栏联动 + 吸顶”做顺手

最近做商城类页面时我发现一个场景几乎每次都会出现左边是分类右边是商品列表。看起来不复杂但真写起来很容易翻车——左边点了右边没滚准右边手动一滑左边高亮又跟不上分组标题吸顶时还会一闪一闪整页质感直接掉下来。这篇我不走“把 UI 堆出来就完事”的路子直接说一个更稳的实现方式用List ListItemGroup Scroller做双栏联动再把吸顶交给系统能力去处理。这种写法的好处很直接结构清楚、滚动同步稳定、后面想加搜索、筛选、楼层跳转也比较好扩。一、这个页面真正难的不是布局而是“状态同步”双栏分类页通常有 3 个动作同时存在用户点左侧分类右侧列表要精准跳到对应分组。用户手动滚动右侧列表左侧当前分类要自动高亮。当前分组标题滚到顶部后要自然吸顶不能自己写个假悬浮层硬顶着。很多人第一版会这么写左边一个Column右边一个Scroll每个分组自己算 offset然后点击时手动滚动到目标位置。这套方案在 demo 阶段可能能跑但一旦遇到这些情况问题就开始冒出来商品图片异步加载后高度变化之前算的 offset 立刻失准。某个分组数据量特别大滚动过程中左侧高亮切换抖动。自己写“吸顶标题”和真实滚动位置对不齐。数据结构改一下整套定位逻辑都要跟着重写。所以我后面基本固定成一条思路右侧列表一定用系统列表组件承载分组点击定位交给滚动控制器吸顶交给sticky能力当前分类高亮用可视区域变化来反向驱动。二、我这次采用的实现思路拆开看其实就 4 件事左侧分类和右侧分组使用同一份数据源。点击左侧分类时调用Scroller定位到对应分组。右侧滚动时监听可视区域首个分组的变化回写当前高亮索引。右侧分组标题使用ListItemGroupsticky做系统吸顶。这几个动作各管各的但状态只保留一个activeIndex。这样不会出现“左边一个 currentIndex右边一个 visibleIndex点击时再来个 targetIndex”的混乱局面。三、数据结构先收口后面会省很多事先定义一份比较规整的分组数据interfaceProductItem{id:numbertitle:stringprice:numbercover:ResourceStr}interfaceCategorySection{id:numbertitle:stringproducts:ProductItem[]}右侧列表渲染什么左侧分类就展示什么。也就是说左边的“女装 / 男装 / 配饰”不要再单独造一份数组直接从sections里映射出来privategetcategories():string[]{returnthis.sections.map(itemitem.title)}这么做的好处很明显后面服务端增删分类或者分类顺序变了你不用同时维护两份数据。四、核心页面结构下面这份代码是我平时更常用的写法结构不花哨但后期好维护。import{curves}fromkit.ArkUIinterfaceProductItem{id:numbertitle:stringprice:numbercover:ResourceStr}interfaceCategorySection{id:numbertitle:stringproducts:ProductItem[]}EntryComponentstruct GoodsCategoryPage{privaterightScroller:ScrollernewScroller()StateactiveIndex:number0StateisProgrammaticScroll:booleanfalseprivatesections:CategorySection[][{id:1,title:女装,products:[{id:101,title:短款外套,price:199,cover:$r(app.media.demo_1)},{id:102,title:修身针织衫,price:169,cover:$r(app.media.demo_2)}]},{id:2,title:男装,products:[{id:201,title:工装夹克,price:259,cover:$r(app.media.demo_3)},{id:202,title:基础连帽卫衣,price:139,cover:$r(app.media.demo_4)}]},{id:3,title:配饰,products:[{id:301,title:斜挎包,price:229,cover:$r(app.media.demo_5)},{id:302,title:极简项链,price:99,cover:$r(app.media.demo_6)}]}]build(){Row(){this.leftCategoryPanel()this.rightGoodsPanel()}.width(100%).height(100%).backgroundColor(#F7F7F8)}BuilderleftCategoryPanel(){Column(){ForEach(this.sections,(section:CategorySection,index:number){Text(section.title).width(100%).height(56).textAlign(TextAlign.Center).fontSize(18).fontWeight(this.activeIndexindex?FontWeight.Medium:FontWeight.Regular).backgroundColor(this.activeIndexindex?#FFFFFF:#F1F2F4).fontColor(this.activeIndexindex?#1F2329:#666666).borderRadius(12).margin({bottom:10}).onClick((){this.activeIndexindexthis.scrollToGroup(index)})})}.width(96).height(100%).padding(12).backgroundColor(#F4F5F7)}BuilderrightGoodsPanel(){List({scroller:this.rightScroller,space:0}){ForEach(this.sections,(section:CategorySection,index:number){ListItemGroup({header:this.groupHeader(section.title)}){ForEach(section.products,(item:ProductItem){ListItem(){this.goodsCard(item)}})}})}.layoutWeight(1).sticky(StickyStyle.Header).onScrollVisibleContentChange((start:number,end:number){if(this.isProgrammaticScroll){return}if(start!this.activeIndexstart0startthis.sections.length){this.activeIndexstart}})}BuildergroupHeader(title:string){Row(){Text(title).fontSize(20).fontWeight(FontWeight.Medium).fontColor(#222222)}.width(100%).height(48).padding({left:14,right:14}).backgroundColor(#FFFFFF)}BuildergoodsCard(item:ProductItem){Row({space:12}){Image(item.cover).width(72).height(72).borderRadius(12)Column({space:8}){Text(item.title).fontSize(16).maxLines(2).textOverflow({overflow:TextOverflow.Ellipsis})Text(¥${item.price}).fontSize(18).fontColor(#D9485A).fontWeight(FontWeight.Medium)}.alignItems(HorizontalAlign.Start).layoutWeight(1)}.width(100%).padding(12).backgroundColor(#FFFFFF).borderRadius(16).margin({left:12,right:12,bottom:10})}privatescrollToGroup(index:number){this.isProgrammaticScrolltruethis.rightScroller.scrollToIndex(index,true,ScrollAlign.START)// 简单兜底等程序滚动结束后再允许滚动事件反向改写 activeIndexsetTimeout((){this.isProgrammaticScrollfalse},260)}}五、这里为什么要用ListItemGroup很多人做分组列表第一反应是外层Scroll里面Column套很多块。这么做并不是不能用但要自己处理的事情太多。换成ListItemGroup有两个明显优势1分组语义清楚列表就是列表分组就是分组代码可读性比“一个大长列里塞很多块”好很多。2吸顶几乎白送只要右侧是List分组头部放在ListItemGroup的header里再配合sticky分组标题的吸顶效果就能直接出来。这类系统级实现通常比手动算位置、自己叠悬浮层更稳。六、左点右滚这件事别自己算像素双栏分类页最容易写歪的一点就是“点击左侧后让右侧滚到指定位置”。如果你是手动记录每个分组距离顶部的像素值那后面大概率会踩下面这些坑商品卡片高度变化原来的位置就不准了。字体缩放、设备尺寸变化定位结果会偏。某些分组动态插入 banner 后后面的 offset 全部失效。更稳的做法还是直接基于分组索引滚动。用索引而不是像素整个逻辑会干净很多。privatescrollToGroup(index:number){this.rightScroller.scrollToIndex(index,true,ScrollAlign.START)}这类“用结构索引做定位”的思路我现在基本固定下来了。因为 UI 再怎么变分组关系本身往往是稳定的。七、右滚左亮关键在于不要和点击联动互相打架还有一个常见问题你点左边右边开始滚滚动过程中又触发了可视区域监听监听回头把activeIndex改了导致左侧高亮闪一下或者中间跳错。我这边一般会加一个小开关程序滚动期间先不让“反向同步逻辑”介入StateisProgrammaticScroll:booleanfalseprivatescrollToGroup(index:number){this.isProgrammaticScrolltruethis.rightScroller.scrollToIndex(index,true,ScrollAlign.START)setTimeout((){this.isProgrammaticScrollfalse},260)}右侧滚动监听里做一下判断.onScrollVisibleContentChange((start:number,end:number){if(this.isProgrammaticScroll){return}if(start!this.activeIndex){this.activeIndexstart}})这不是最复杂的方案但对业务页来说够稳也容易看懂。尤其是团队协作时后面别人接手不会一脸懵。八、几个我实际踩过的坑1别维护两份“当前分类”左侧一个右侧一个最后一定会乱。保留一个activeIndex就够了。2首次进入页面不要太着急做初始定位如果你一进页面就立即滚动到某个分组最好放到首帧渲染之后再做稳定性会好一些。尤其是页面里有图片、异步数据、骨架屏时更要留一点缓冲。3吸顶标题别自己硬造如果系统组件已经能做 sticky就先用系统能力。自己写悬浮层不是不行但维护成本高而且和真实滚动区域很容易对不齐。4高亮更新不要无脑 setState滚动过程中事件很多索引没变就不要反复赋值不然容易多出没必要的刷新。九、这个方案后面还能怎么扩这套双栏结构稳定下来以后后面加功能其实很顺顶部搜索后直接跳到搜索命中的分类。左侧加“品牌 / 材质 / 价格带”等筛选入口。右侧分组头部增加活动文案、倒计时、标签条。做楼层导航时沿用同一套索引联动思路。也就是说这不是一个只能写“商品分类”的小技巧它本质上是一种分组内容导航方案。做菜谱、知识目录、门店服务、课程章节思路都通用。十、收个尾这类页面最容易犯的错误就是一上来只盯着 UI结果把滚动和状态同步写得很散。我的经验是分类页要做顺不是靠多写几层容器而是把“点击定位、滚动同步、分组吸顶”这三件事拆清楚。如果你现在也在做鸿蒙商城页或者有类似“左边导航、右边内容”的业务页这套写法我觉得值得直接上手试一遍。先把骨架搭稳后面的美化、动效、营销组件都会轻松很多。