第42篇拍摄预览浮层让用户确认刚拍的成果相机体验里“拍完之后发生了什么”非常关键。只把照片默默保存进相册用户会不确定是否成功直接跳转相册又会打断连续拍摄。双镜记忆相机采用拍摄预览浮层在当前相机页轻量展示刚拍结果。这一篇看预览浮层如何从GalleryMoment读取图片 Uri并在页面上同时处理单拍和双拍。它不是一张静态提示图而是连接拍摄回调、相册入库和后续用户动作的过渡层。这一篇继续围绕 21 天「智能相机开发实战」训练营展开。内容只使用当前项目里的 ArkTS、服务层代码和真实页面截图来讲不把封面图放进正文。阅读时可以先看截图理解用户侧效果再顺着函数名回到工程定位实现。本篇目标理解拍摄成功后为什么需要轻量预览。掌握 showCameraCapturePreview 如何从记录填充浮层状态。读懂浮层 UI 如何处理双镜小窗和操作按钮。把 appendGalleryRecord、预览浮层和相册选择状态串起来。对应源码位置entry/src/main/ets/pages/Index.ets一、预览浮层解决的是“成功感”和“不中断”用户按下快门后需要立刻看到成果确认没有黑图、错位或只拍到一边。但智能相机又要支持连续拍摄如果每拍一张都跳到相册会让拍摄节奏断掉。浮层是两者之间的平衡它覆盖在相机页上展示刚拍图片和少量动作用户可以关闭继续拍也可以进入相册做更完整整理。图1 拍摄预览浮层在相机页中的展示位置和状态流向二、showCameraCapturePreview从记录填充预览状态入库记录里已经有backUri、frontUri和createdLabel。预览浮层不重新计算文件路径而是直接消费GalleryMoment。这样它展示的内容和相册即将展示的内容完全一致。双拍时frontUri与backUri不同小窗才会出现单拍时两者可能相同或前摄为空浮层自然退化为主图预览。图2 showCameraCapturePreview 从 GalleryMoment 填充预览浮层状态private showCameraCapturePreview(record: GalleryMoment): void { if (this.activeTab ! camera) { return; } if (this.capturePreviewHideTimer 0) { clearTimeout(this.capturePreviewHideTimer); this.capturePreviewHideTimer 0; } this.cameraCapturePreviewBackUri record.backUri; this.cameraCapturePreviewFrontUri record.frontUri; this.cameraCapturePreviewTitle record.createdLabel; this.cameraCapturePreviewActionsVisible false; this.cameraCapturePreviewVisible true; } private hideCameraCapturePreview(): void { if (this.capturePreviewHideTimer 0) { clearTimeout(this.capturePreviewHideTimer); this.capturePreviewHideTimer 0; } this.cameraCapturePreviewVisible false; this.cameraCapturePreviewActionsVisible false; }这段代码体现了模型驱动 UI 的好处浮层不关心照片来自单拍、双拍还是导入只要记录字段完整就能正常展示。三、浮层 UI 同时承接主图、小窗和动作buildCameraCapturePreviewOverlay根据cameraCapturePreviewVisible和图片 Uri 决定是否渲染。主图占主要区域前摄图在双镜场景下以小窗叠加操作按钮只有在动作区可见时出现。这类浮层要特别注意尺寸控制。文章正文里的截图也统一限制宽度避免图片把内容撑满应用内则通过固定高度和条件渲染避免遮挡拍摄按钮。图3 buildCameraCapturePreviewOverlay 负责主图、小窗和操作按钮private buildCameraCapturePreviewOverlay() { if (this.cameraCapturePreviewVisible this.cameraCapturePreviewBackUri.length 0) { Stack({ alignContent: Alignment.BottomStart }) { Stack({ alignContent: Alignment.BottomEnd }) { Image(this.cameraCapturePreviewBackUri) .width(100%) .height(100%) .objectFit(ImageFit.Cover) .backgroundColor(#000000) if (this.cameraCapturePreviewFrontUri.length 0 this.cameraCapturePreviewFrontUri ! this.cameraCapturePreviewBackUri) { Image(this.cameraCapturePreviewFrontUri) .width(46) .height(60) .borderRadius(10) .border({ width: 3, color: #FFF7E6 }) .objectFit(ImageFit.Contain) .backgroundColor(#050809) .margin({ right: 8, bottom: 8 }) } } .width(100%) .height(100%) .borderRadius(30) .clip(true) .onClick(() { this.hideCameraCapturePreview(); this.openLatestCaptureInGallery(); }) if (this.cameraCapturePreviewActionsVisible) { Row({ space: 10 }) { Column({ space: 4 }) { Text(已保存) .fontSize(15) .fontWeight(FontWeight.Medium) .fontColor(#FFF7E6) Text(this.cameraCapturePreviewTitle)双镜小窗不是单独的数据源它只是frontUri的另一种呈现方式。这样可以保证详情页、相册卡片和预览浮层都从同一条记录取图。四、入库后刷新选择项再展示预览appendGalleryRecord把新记录插到列表最前面更新选中项、分组 key、备注草稿和提示文本然后调用持久化。它还会调用showCameraCapturePreview让用户马上看到新作品。这里顺序很重要。先整理记录和选中状态再展示浮层可以保证用户点进相册时落到刚拍照片而不是进入旧的选中项。图4 appendGalleryRecord 入库后同步刷新选择项并显示预览private async appendGalleryRecord(record: GalleryMoment): Promisevoid { this.logCaptureTrace( append-gallery-record-start, recordId${record.id} pairIndex${record.pairIndex} backPath${record.backPath} frontPath${record.frontPath} ); const readyRecord record.aiStatus ready ? record : GalleryRecordService.applyLocalInsight(record); const nextRecords [readyRecord, ...this.galleryRecords.filter((item: GalleryMoment) item.id ! readyRecord.id)]; this.galleryRecords nextRecords; this.syncRecordSelections(nextRecords); this.gallerySelectedId readyRecord.id; this.selectedGalleryGroupKey this.buildGalleryRecordGroupKey(readyRecord); this.galleryUserNoteDraft this.getRecordUserNote(readyRecord); this.showCameraCapturePreview(readyRecord); this.syncSelectedMapMemory(true); this.capturePairCount nextRecords.length; this.galleryNoticeText this.hasGalleryFocus() ? this.getGalleryScopeDescription() : await this.syncMapMarkers(); this.updateAwarenessRecommendation(false); await this.persistGalleryRecords(nextRecords); this.gallerySelectedId readyRecord.id; this.selectedGalleryGroupKey this.buildGalleryRecordGroupKey(readyRecord); this.logCaptureTrace( append-gallery-record-finished, recordId${readyRecord.id} total${nextRecords.length} selected${this.gallerySelectedId}预览浮层不是孤立组件它依赖入库闭环。只有相册状态已经更新预览上的“去相册查看”才是可靠动作。工程检查清单拍摄成功后立即给用户可见反馈。浮层展示的图片 Uri 来自 GalleryMoment不重新拼路径。单拍和双拍共用浮层双拍额外显示前摄小窗。入库后先刷新选中记录再展示预览。浮层要能关闭不能阻断连续拍摄。今日练习找到cameraCapturePreviewActionsVisible观察它在哪些交互下变化。把单拍记录和双拍记录分别代入 showCameraCapturePreview比较浮层字段差异。设计一个“预览后删除”动作思考它应该先删文件还是先删记录。训练营后面的内容会继续按“真实页面效果 → 源码定位 → 状态闭环 → 可验证结果”的节奏推进。每一篇都尽量让你能拿着代码直接回到项目里复现而不是只停留在概念说明。