HarmonyOS7共享元素转场页实战：共享元素动画与页面视觉连续性

前言

共享元素转场最迷人的地方，是它能让两个页面看起来像同一个空间里的不同层级。卡片点进去变详情页，这种“接得上”的感觉，体验上差别非常明显。 如果你手上正好有类似页面要做，那这篇文章最好不要只当教程看。我更建议你边看边想：这一段如果换成我自己的业务数据，需不需要改状态，需不需要拆组件。

如果把这页当成练习材料，我会优先看它怎样围绕 共享元素动画与页面视觉连续性 组织页面。因为这一层想清楚了，后面的代码基本就不会散。

这类写法尤其适合落在 相册、内容卡片、商品详情、作品展示 这些场景里，所以我下面不会只讲“组件怎么写”，而是更关心“放进页面之后为什么这样组织”。

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

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

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

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

看懂状态，比看懂样式更重要

共享元素转场最关键的是让列表项和详情页知道“同一个对象是谁”。

• isShow：控制示例区域显示。
• showDetail：控制当前是列表页还是详情页。
• selectedIndex：记录用户点中的列表项，用来在详情页读取同一条数据。
• items：保存可进入详情的共享元素数据。

selectedIndex很重要，它让列表里的卡片、图标、标题和详情页内容保持同源。没有这个状态，共享元素动画就只剩视觉效果，业务数据会对不上。

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

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

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

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

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

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

@StateisShow:boolean=true@StateshowDetail:boolean=false@StateselectedIndex:number=0privateitems:SharedElementTransitionItem[]=[{title:'HarmonyOS',icon:'📱',color:DEMO_THEME_COLOR,desc:'全新分布式操作系统'},{title:'ArkUI',icon:'🎨',color:PRESET_COLORS[0].value,desc:'声明式UI开发框架'},{title:'ArkTS',icon:'⚡',color:PRESET_COLORS[1].value,desc:'TypeScript 扩展语言'},]build(){Column(){if(this.isShow){Column({space:16}){Text('共享元素转场').fontSize(20).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)Text('页面跳转时，元素从列表位置平滑过渡到详情位置').fontSize(13).fontColor(DEMO_SUBTEXT_COLOR).width('100%')if(!this.showDetail){

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

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

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

同一个组件，放进不同页面之后为什么观感差很多，往往不是样式问题，而是驱动它的方式不一样。像索引、导航、吸附、徽章这一类，差别基本都出在这里。

.onClick(()=>{this.selectedIndex=indexthis.showDetail=true})})}.width('100%')// 共享元素说明Column({space:8}){Text('共享元素转场原理').fontSize(13).fontWeight(FontWeight.Medium).fontColor('#333333').width('100%')Column({space:4}){Text('1. 列表页和详情页的元素设置相同的 geometryId').fontSize(12).fontColor(DEMO_SUBTEXT_COLOR)Text('2. 跳转时系统自动计算位置差异并执行动画').fontSize(12).fontColor(DEMO_SUBTEXT_COLOR)Text('3. 图标/标题等元素平滑过渡到新位置')

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

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

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

这一页我建议这样上手

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

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

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

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

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

• 导航类页面迁到业务里时，最先要补的是参数类型和返回结果约定，而不是视觉样式。
• 如果页面层级开始变多，建议尽早把跳转入口、回退逻辑和标题栏动作拆成清晰边界。
• 只要页面里有重复块，就别硬撑着手写到底；早点抽成小组件，后面改样式和改交互都会轻松很多。
• 示例数据最好和布局代码分开放，不然后面一接接口，页面文件很容易立刻变臃肿。

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

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

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

完整代码

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

/** * 共享元素转场页 */import{PRESET_COLORS,generateListItems,DEMO_BG_COLOR,DEMO_CARD_COLOR,DEMO_THEME_COLOR,DEMO_SUBTEXT_COLOR}from'./types'interfaceSharedElementTransitionItem{title:stringicon:stringcolor:stringdesc:string}@Entry@Componentstruct SharedElementTransition{@StateisShow:boolean=true@StateshowDetail:boolean=false@StateselectedIndex:number=0privateitems:SharedElementTransitionItem[]=[{title:'HarmonyOS',icon:'📱',color:DEMO_THEME_COLOR,desc:'全新分布式操作系统'},{title:'ArkUI',icon:'🎨',color:PRESET_COLORS[0].value,desc:'声明式UI开发框架'},{title:'ArkTS',icon:'⚡',color:PRESET_COLORS[1].value,desc:'TypeScript 扩展语言'},]build(){Column(){if(this.isShow){Column({space:16}){Text('共享元素转场').fontSize(20).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)Text('页面跳转时，元素从列表位置平滑过渡到详情位置').fontSize(13).fontColor(DEMO_SUBTEXT_COLOR).width('100%')if(!this.showDetail){Column({space:10}){ForEach(this.items,(item:SharedElementTransitionItem,index:number)=>{Row({space:12}){Text(item.icon).fontSize(32).width(56).height(56).textAlign(TextAlign.Center).backgroundColor(item.color).borderRadius(14)Column({space:4}){Text(item.title).fontSize(15).fontWeight(FontWeight.Medium).fontColor('#333333')Text(item.desc).fontSize(12).fontColor(DEMO_SUBTEXT_COLOR)Text('点击查看共享元素效果 →').fontSize(11).fontColor(item.color)}.alignItems(HorizontalAlign.Start).layoutWeight(1)}.width('100%').padding(14).backgroundColor(DEMO_CARD_COLOR).borderRadius(10).onClick(()=>{this.selectedIndex=indexthis.showDetail=true})})}.width('100%')// 共享元素说明Column({space:8}){Text('共享元素转场原理').fontSize(13).fontWeight(FontWeight.Medium).fontColor('#333333').width('100%')Column({space:4}){Text('1. 列表页和详情页的元素设置相同的 geometryId').fontSize(12).fontColor(DEMO_SUBTEXT_COLOR)Text('2. 跳转时系统自动计算位置差异并执行动画').fontSize(12).fontColor(DEMO_SUBTEXT_COLOR)Text('3. 图标/标题等元素平滑过渡到新位置').fontSize(12).fontColor(DEMO_SUBTEXT_COLOR)}}.width('100%').padding(12).backgroundColor('#FAFAFA').borderRadius(8)}else{// 详情页（模拟共享元素目标位置）Column({space:16}){Row(){Text('← 返回').fontSize(14).fontColor(DEMO_THEME_COLOR).onClick(()=>{this.showDetail=false})Blank()}.width('100%')// 共享元素放大显示Column({space:12}){Text(this.items[this.selectedIndex].icon).fontSize(64).width(100).height(100).textAlign(TextAlign.Center).backgroundColor(this.items[this.selectedIndex].color).borderRadius(20)Text(this.items[this.selectedIndex].title).fontSize(24).fontWeight(FontWeight.Bold).fontColor('#333333')Text(this.items[this.selectedIndex].desc).fontSize(15).fontColor(DEMO_SUBTEXT_COLOR).textAlign(TextAlign.Center)Text('图标和标题通过共享元素转场从列表平滑过渡到此处').fontSize(12).fontColor('#999999').textAlign(TextAlign.Center)}.width('100%').padding(24).backgroundColor(DEMO_CARD_COLOR).borderRadius(12)Button('返回列表').fontSize(14).height(40).backgroundColor(this.items[this.selectedIndex].color).fontColor('#FFFFFF').borderRadius(20).onClick(()=>{this.showDetail=false})}.width('100%').padding(16).backgroundColor(DEMO_CARD_COLOR).borderRadius(12)}}.alignItems(HorizontalAlign.Start)}Text('共享元素转场页 - 共享元素效果').fontSize(12).fontColor('#999999').margin({top:12})}.width('100%').height('100%').backgroundColor(DEMO_BG_COLOR).padding(16)}}

收个尾

我会把 共享元素转场页 归到“代码不长，但值得留档”的那类示例里。以后遇到同类页面，回来翻它，比重新猜一遍状态和结构靠谱得多。