前言在“海风日记“的日记详情页中图片展示区使用水平 Scroll实现图片列表的横向滚动浏览点击图片可跳转到全屏查看器。本文将从源码出发深入讲解水平 Scroll 的实现、图片占位设计和点击跳转逻辑。一、水平滚动图片区1.1 源码if (this.diary.imageUrls.length 0) { Scroll() { Row({ space: 8 }) { ForEach(this.diary.imageUrls, (url: string, idx: number) { Column() { SymbolGlyph($r(sys.symbol.camera)) .fontSize(32).fontColor([rgba(255,255,255,0.5)]) } .width(200).height(140) .borderRadius(14) .linearGradient({ angle: 135, colors: [[#F5D0D0, 0], [#E8A0A0, 1]] }) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) .onClick(() { router.pushUrl({ url: pages/image/ImageViewerPage, params: { index: idx } }) }) }) } .padding({ left: PAGE_PADDING, right: PAGE_PADDING }) } .scrollable(ScrollDirection.Horizontal) // 水平滚动 .scrollBar(BarState.Off) .width(100%) .height(160) .margin({ top: 12 }) }二、属性配置2.1 水平滚动Scroll() .scrollable(ScrollDirection.Horizontal) // 水平方向 .scrollBar(BarState.Off) // 隐藏滚动条2.2 图片占位Column() .width(200).height(140) // 固定尺寸 .borderRadius(14) // 圆角 .linearGradient({ // 渐变背景 angle: 135, colors: [[#F5D0D0, 0], [#E8A0A0, 1]] }) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center)2.3 点击跳转.onClick(() { router.pushUrl({ url: pages/image/ImageViewerPage, params: { index: idx } }) })三、图片查看器3.1 接收参数Entry Component struct ImageViewerPage { State currentIndex: number 0 aboutToAppear() { const params router.getParams() as Recordstring, number if (params?.index ! undefined) { this.currentIndex params.index } } }四、常见问题4.1 水平滚动不生效问题设置了scrollable(ScrollDirection.Horizontal)但无法水平滚动。原因Row 的宽度没有超出 Scroll 的宽度。解决方案确保 Row 内的内容总宽度超过 Scroll 宽度。总结本文通过“海风日记“的图片展示区深入讲解了水平 Scroll 的实现水平滚动ScrollDirection.Horizontal图片占位渐变圆角卡片点击跳转router.pushUrl 传递索引查看器接收参数显示对应图片下一篇文章将深入讲解DiaryDetail2Page 卡片式详情敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Scroll 组件文档Router 路由文档LinearGradient 文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区