文章目录前言别急着抄先认结构Peek 效果的重点是让用户知道后面还有内容时间不多的话先盯这几个入口第一段关键代码页面是怎么被带起来的第二段关键代码真正决定交互手感的地方如果你要亲手试顺序最好别乱真放到业务里我会先改什么它的参考价值不只是把效果跑出来完整代码收个尾前言peek 效果之所以常见是因为它能用很少的空间告诉用户后面还有内容。这个案例把预览露出和吸附停靠组合在一起很适合做产品感比较强的界面。 这一页适合慢一点读不是因为代码特别难而是因为它里面很多决定都和真实页面很像。把这些决定看懂比把组件名字记住更值钱。如果把这页当成练习材料我会优先看它怎样围绕 peek 效果与吸附卡片预览设计 组织页面。因为这一层想清楚了后面的代码基本就不会散。这类写法尤其适合落在 推荐卡片、轮播式内容、分组模块预览 这些场景里所以我下面不会只讲“组件怎么写”而是更关心“放进页面之后为什么这样组织”。别急着抄先认结构这一类页面看源码最怕的就是“每一段都认识但拼起来不知道为什么这么摆”。所以这里先从页面骨架讲起比直接盯属性更省时间。页面区域主要职责在代码里的典型表现头部说明区交代当前案例在演示什么Text标题、补充说明、标签文案核心展示区承载组件能力的主要效果Column、Row、业务组件本体辅助信息区补充状态、标签、分组或统计信息次级文本、角标、分组标题、描述块交互入口区负责切换、返回、定位、选择等动作点击事件、按钮、索引条、导航入口页面里额外定义的数据模型包括Item。如果后面准备接接口我更建议把这些类型继续收口成更直白的业务命名。这个案例表面看是界面效果真正该盯的是状态怎么流动因为大多数可复用价值都藏在这里。Peek 效果的重点是让用户知道后面还有内容这页没有复杂状态isShow也只是展示开关。真正要看的是卡片宽度、右侧间距和容器裁切共同制造出的“露出下一张”的效果。Peek 卡片通常要处理好三件事当前卡片要足够完整用户能明确知道现在停靠的是哪一张。下一张要露一点露出边缘就够了太多会削弱当前卡片的主次关系。吸附要稳定滑动结束后停在固定位置用户才会形成可预期的浏览节奏。所以 peek 不是单纯炫视觉而是在用布局暗示“这里可以继续滑”。时间不多的话先盯这几个入口我一般不会把所有方法从上到下读一遍而是先找“用户动一下之后页面为什么会变”的那条链路。这个案例没有太多额外方法核心价值主要集中在页面结构和组件组合方式。我自己读这类方法时通常只抓一条线谁触发、谁被改、页面哪里立刻有反馈。把这三件事连起来很多交互代码一下就顺了。第一段关键代码页面是怎么被带起来的这一段建议慢一点看。它通常决定了页面初始状态也决定了后续哪些区域会跟着刷新。StateisShow:booleantruebuild(){Column(){if(this.isShow){Column(){Text(卡片吸附 - peek 预览效果).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#FF6B6B).margin({bottom:4})Text(水平滚动卡片吸附时露出下一张卡片的边缘).fontSize(12).fontColor(DEMO_SUBTEXT_COLOR).margin({bottom:12})}.width(100%).alignItems(HorizontalAlign.Start)Scroll(){Row(){ForEach([{title:风景,color:#FF6B6B,emoji:️},{title:美食,color:#FFA500,emoji:},{title:旅行,color:#4ECDC4,emoji:✈️},{title:运动,color:#6BCB77,emoji:⚽},{title:音乐,color:#9B59B6,emoji:},{title:科技,color:#4D96FF,emoji:}],(item:ScrollsnapPeekCardsItem,index:number){Column(){这一段我通常不会一下翻过去而是先确认下面这几个判断点State字段到底在控制显示、选择、跳转结果还是模式切换。默认值是不是合理页面一打开会不会就落在一个可理解的状态上。字段命名能不能让后来的人一眼看懂用途而不是还要翻半天 UI。第二段关键代码真正决定交互手感的地方这段代码要结合卡片宽度和容器空间一起看。当前卡片占据主要区域但下一张会露出边缘这个细小预览比文字提示更自然地告诉用户可以继续横滑。/** * 卡片预览吸附页 */import{PRESET_COLORS,generateListItems,DEMO_BG_COLOR,DEMO_CARD_COLOR,DEMO_THEME_COLOR,DEMO_SUBTEXT_COLOR}from./typesinterfaceScrollsnapPeekCardsItem{title:stringcolor:stringemoji:string}EntryComponentstruct ScrollsnapPeekCards{StateisShow:booleantruebuild(){Column(){if(this.isShow){Column(){Text(卡片吸附 - peek 预览效果).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#FF6B6B).margin({bottom:4})Text(水平滚动卡片吸附时露出下一张卡片的边缘).fontSize(12).fontColor(DEMO_SUBTEXT_COLOR).margin({bottom:12})代码读到这里我通常会顺手补三件事不然后面很容易只看热闹这个交互入口接收的到底是什么输入。输入进来之后代码改了哪个状态或者触发了哪次导航。变化发生后用户最先感知到的反馈会落在哪个区域。这三个问题串起来之后这一页基本就不只是“看过”而是真的读懂了。如果你要亲手试顺序最好别乱如果你准备把这个案例交给团队里别的人看我甚至建议直接让对方按下面的顺序自己操作一遍。很多理解偏差都会在这一步消失。先进入页面确认首屏是不是把卡片预览吸附页的主题交代清楚。盯住核心展示区观察默认状态下最醒目的内容是什么。主动触发一次关键交互比如点击、滑动、跳转、返回、切换或者选择。回头检查状态区、提示区、标题区或者附属信息有没有跟着变化。最后再打开源码对照刚才那次交互把状态变化链路串起来。如果这五步你能边操作边说清楚页面发生了什么后面再换成自己的数据和交互心里会稳很多。真放到业务里我会先改什么从教程页到业务页差的从来不只是接口。更多时候是组件职责、命名和状态来源要重新收拾一遍。吸附滚动别只调参数子项尺寸、容器留白和预览区域通常比 API 本身更影响体感。如果页面同时存在自由浏览和精准停靠两种需求最好把吸附开关当成正式状态来设计。只要页面里有重复块就别硬撑着手写到底早点抽成小组件后面改样式和改交互都会轻松很多。示例数据最好和布局代码分开放不然后面一接接口页面文件很容易立刻变臃肿。它的参考价值不只是把效果跑出来很多官方示例的价值在于展示组件存在过但这种页面更进一步它在展示“组件被放进页面之后怎么活起来”。页面结构比较稳后续不管是换数据还是换皮肤成本都不会特别高。状态数量总体可控适合拿来练“一个页面里如何分配职责”这件事。组件参数和页面目标之间关系比较直观不太会出现“能跑但看不懂为什么这么配”的情况。完整代码下面保留整理过命名的完整 ArkTS 代码方便你直接对照学习。这里已经去掉原始的 Demo 命名改成了更贴近当前案例语义的名称。/** * 卡片预览吸附页 */import{PRESET_COLORS,generateListItems,DEMO_BG_COLOR,DEMO_CARD_COLOR,DEMO_THEME_COLOR,DEMO_SUBTEXT_COLOR}from./typesinterfaceScrollsnapPeekCardsItem{title:stringcolor:stringemoji:string}EntryComponentstruct ScrollsnapPeekCards{StateisShow:booleantruebuild(){Column(){if(this.isShow){Column(){Text(卡片吸附 - peek 预览效果).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#FF6B6B).margin({bottom:4})Text(水平滚动卡片吸附时露出下一张卡片的边缘).fontSize(12).fontColor(DEMO_SUBTEXT_COLOR).margin({bottom:12})}.width(100%).alignItems(HorizontalAlign.Start)Scroll(){Row(){ForEach([{title:风景,color:#FF6B6B,emoji:️},{title:美食,color:#FFA500,emoji:},{title:旅行,color:#4ECDC4,emoji:✈️},{title:运动,color:#6BCB77,emoji:⚽},{title:音乐,color:#9B59B6,emoji:},{title:科技,color:#4D96FF,emoji:}],(item:ScrollsnapPeekCardsItem,index:number){Column(){Text(item.emoji).fontSize(48).margin({bottom:12})Text(item.title).fontSize(20).fontWeight(FontWeight.Bold).fontColor(#FFFFFF)Text(\卡片 \${index1}\).fontSize(11).fontColor(rgba(255,255,255,0.6)).margin({top:6})Text(← 滑动查看下一张 →).fontSize(9).fontColor(rgba(255,255,255,0.3)).margin({top:20})}.width(250).height(220).backgroundColor(item.color).borderRadius(18).padding(20).justifyContent(FlexAlign.Center).shadow({radius:20,color:#00000020,offsetY:10}).margin({right:8})})}.padding({left:16,right:16})}.width(100%).height(240).scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off).scrollSnap({snapAlign:ScrollSnapAlign.START}).backgroundColor(transparent).borderRadius(12)}Text(卡片预览吸附页 - 卡片吸附peek 预览下一张卡片).fontSize(12).fontColor(#999999).margin({top:12})}.width(100%).height(100%).backgroundColor(#F5F6FA).padding(16)}}收个尾如果你最近正好要做 推荐卡片、轮播式内容、分组模块预览那这篇可以直接当起步模板。先跑通再替换数据和交互效率会比从空白页起步高很多。