HarmonyOS7居中吸附对比页实战：ScrollSnap Center 模式的强化展示

2026/7/15 20:43:19

文章目录

- - 前言
  - 页面骨架其实比参数更重要
  - Center 强化展示，本质是在制造当前焦点
  - 真正决定页面行为的是这些函数
  - 第一段关键代码：页面是怎么被带起来的
  - 第二段关键代码：真正决定交互手感的地方
  - 这一页我建议这样上手
  - 从示例到项目，中间这几步别省
  - 这类实现为什么比文档片段更有用
  - 完整代码
  - 收个尾

前言

虽然前面已经有居中吸附案例，但这个页面更强调视觉对比和居中焦点本身。它不是基础教学，而是把 Center 模式真正打磨成一个可落地的展示方案。如果你手上正好有类似页面要做，那这篇文章最好不要只当教程看。我更建议你边看边想：这一段如果换成我自己的业务数据，需不需要改状态，需不需要拆组件。

如果把这页当成练习材料，我会优先看它怎样围绕 ScrollSnap Center 模式的强化展示组织页面。因为这一层想清楚了，后面的代码基本就不会散。

这类写法尤其适合落在精选内容、主推卡片、内容聚焦页这些场景里，所以我下面不会只讲“组件怎么写”，而是更关心“放进页面之后为什么这样组织”。

页面骨架其实比参数更重要

如果你已经打开运行效果，会更容易理解这一段。因为这页并不是靠某一个孤立控件撑起来的，而是几个区域互相配合才成立。

页面区域	主要职责	在代码里的典型表现
头部说明区	交代当前案例在演示什么	`Text`标题、补充说明、标签文案
核心展示区	承载组件能力的主要效果	`Column`、`Row`、业务组件本体
辅助信息区	补充状态、标签、分组或统计信息	次级文本、角标、分组标题、描述块
交互入口区	负责切换、返回、定位、选择等动作	点击事件、按钮、索引条、导航入口

页面里额外定义的数据模型包括：Item。如果后面准备接接口，我更建议把这些类型继续收口成更直白的业务命名。

单个组件 API 不难，难的是和其他布局、容器、交互拼在一起之后还不乱，这篇会重点讲这个。

Center 强化展示，本质是在制造当前焦点

这页的isShow不是重点，真正应该建模的是“当前哪个章节停在视口中心”。即使代码里没有显式写currentIndex，用户的感知里也会自然形成一个中心项。

Center 模式适合这类内容：

章节式内容：每一项都像一个独立段落，停在中心时更有阅读焦点。
精选展示：当前项被视觉中心强化，适合主推卡片、精选内容。
纵向浏览：和横向卡片不同，纵向 Center 更像一屏一屏读下去。

所以这页的价值在于让你看到：有时候不需要显式状态，布局和停靠策略本身就能塑造“当前项”。

真正决定页面行为的是这些函数

如果你想更快进入状态，可以把这些方法当成页面的控制台。哪个方法被触发，页面就往哪个方向走。

这个案例没有太多额外方法，核心价值主要集中在页面结构和组件组合方式。

我自己读这类方法时，通常只抓一条线：谁触发、谁被改、页面哪里立刻有反馈。把这三件事连起来，很多交互代码一下就顺了。

第一段关键代码：页面是怎么被带起来的

这一段建议慢一点看。它通常决定了页面初始状态，也决定了后续哪些区域会跟着刷新。

@StateisShow:boolean=truebuild(){Column(){if(this.isShow){Column(){Text('ScrollSnap CENTER 居中吸附').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#4ECDC4').margin({bottom:4})Text('snapAlign(ScrollSnapAlign.CENTER) 垂直滚动吸附到视口中央').fontSize(12).fontColor(DEMO_SUBTEXT_COLOR).margin({bottom:12})}.width('100%').alignItems(HorizontalAlign.Start)Scroll(){Column(){ForEach([{label:'第一章',color:'#FF6B6B'},{label:'第二章',color:'#FFA500'},{label:'第三章',color:'#FFD93D'},{label:'第四章',color:'#6BCB77'},{label:'第五章',color:'#4ECDC4'},{label:'第六章',color:'#4D96FF'},{label:'第七章',color:'#9B59B6'},{label:'第八章',color:'#FF6B9D'}

这一段我通常不会一下翻过去，而是先确认下面这几个判断点：

@State字段到底在控制显示、选择、跳转结果还是模式切换。
默认值是不是合理，页面一打开会不会就落在一个可理解的状态上。
字段命名能不能让后来的人一眼看懂用途，而不是还要翻半天 UI。

第二段关键代码：真正决定交互手感的地方

这段代码的核心不是颜色数组，而是纵向区块配合 Center 停靠。每个章节卡片滑到中间时都会变成当前焦点，这种体感很适合做阅读分段或精选内容展示。

/** * 居中吸附对比页 */import{PRESET_COLORS,generateListItems,DEMO_BG_COLOR,DEMO_CARD_COLOR,DEMO_THEME_COLOR,DEMO_SUBTEXT_COLOR}from'./types'interfaceScrollsnapCenterShowcaseItem{label:stringcolor:string}@Entry@Componentstruct ScrollsnapCenterShowcase{@StateisShow:boolean=truebuild(){Column(){if(this.isShow){Column(){Text('ScrollSnap CENTER 居中吸附').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#4ECDC4').margin({bottom:4})Text('snapAlign(ScrollSnapAlign.CENTER) 垂直滚动吸附到视口中央').fontSize(12).fontColor(DEMO_SUBTEXT_COLOR).margin({bottom:12})}

代码读到这里，我通常会顺手补三件事，不然后面很容易只看热闹：

这个交互入口接收的到底是什么输入。
输入进来之后，代码改了哪个状态，或者触发了哪次导航。
变化发生后，用户最先感知到的反馈会落在哪个区域。

这三个问题串起来之后，这一页基本就不只是“看过”，而是真的读懂了。

这一页我建议这样上手

我比较推荐用“观察 -> 触发 -> 对照源码”的方式学这个页面。先看到效果，再回去找原因，记得会更牢。

先进入页面，确认首屏是不是把居中吸附对比页的主题交代清楚。
盯住核心展示区，观察默认状态下最醒目的内容是什么。
主动触发一次关键交互，比如点击、滑动、跳转、返回、切换或者选择。
回头检查状态区、提示区、标题区或者附属信息有没有跟着变化。
最后再打开源码，对照刚才那次交互，把状态变化链路串起来。

如果这五步你能边操作边说清楚页面发生了什么，后面再换成自己的数据和交互，心里会稳很多。

从示例到项目，中间这几步别省

如果只把这页当 demo 看，它的价值其实只发挥了一半。更值得做的，是顺手想一遍：放进项目之后哪里该抽，哪里该换，哪里该收口。

吸附滚动别只调参数，子项尺寸、容器留白和预览区域通常比 API 本身更影响体感。
如果页面同时存在自由浏览和精准停靠两种需求，最好把吸附开关当成正式状态来设计。
只要页面里有重复块，就别硬撑着手写到底；早点抽成小组件，后面改样式和改交互都会轻松很多。
示例数据最好和布局代码分开放，不然后面一接接口，页面文件很容易立刻变臃肿。

这类实现为什么比文档片段更有用

如果你经常做业务页，会发现这种案例特别适合复用思路。它不像单纯 API 示例那样看完就过去。

页面结构比较稳，后续不管是换数据还是换皮肤，成本都不会特别高。
状态数量总体可控，适合拿来练“一个页面里如何分配职责”这件事。
组件参数和页面目标之间关系比较直观，不太会出现“能跑但看不懂为什么这么配”的情况。

完整代码

下面保留整理过命名的完整 ArkTS 代码，方便你直接对照学习。这里已经去掉原始的 Demo 命名，改成了更贴近当前案例语义的名称。

/** * 居中吸附对比页 */import{PRESET_COLORS,generateListItems,DEMO_BG_COLOR,DEMO_CARD_COLOR,DEMO_THEME_COLOR,DEMO_SUBTEXT_COLOR}from'./types'interfaceScrollsnapCenterShowcaseItem{label:stringcolor:string}@Entry@Componentstruct ScrollsnapCenterShowcase{@StateisShow:boolean=truebuild(){Column(){if(this.isShow){Column(){Text('ScrollSnap CENTER 居中吸附').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#4ECDC4').margin({bottom:4})Text('snapAlign(ScrollSnapAlign.CENTER) 垂直滚动吸附到视口中央').fontSize(12).fontColor(DEMO_SUBTEXT_COLOR).margin({bottom:12})}.width('100%').alignItems(HorizontalAlign.Start)Scroll(){Column(){ForEach([{label:'第一章',color:'#FF6B6B'},{label:'第二章',color:'#FFA500'},{label:'第三章',color:'#FFD93D'},{label:'第四章',color:'#6BCB77'},{label:'第五章',color:'#4ECDC4'},{label:'第六章',color:'#4D96FF'},{label:'第七章',color:'#9B59B6'},{label:'第八章',color:'#FF6B9D'}],(item:ScrollsnapCenterShowcaseItem,index:number)=>{Column(){Text(item.label).fontSize(32).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')Text('章节内容 '+(index+1)).fontSize(14).fontColor('rgba(255,255,255,0.7)').margin({top:8})}.width('100%').height(140).backgroundColor(item.color).borderRadius(14).padding(20).justifyContent(FlexAlign.Center).margin({bottom:12})})}.padding({left:4,right:4})}.width('100%').height(420).scrollBar(BarState.Auto).scrollSnap({snapAlign:ScrollSnapAlign.CENTER}).backgroundColor(DEMO_CARD_COLOR).borderRadius(12).padding(12)}Text('居中吸附对比页 - ScrollSnap CENTER 居中吸附：吸附到视口中央').fontSize(12).fontColor('#999999').margin({top:12})}.width('100%').height('100%').backgroundColor('#F5F6FA').padding(16)}}