58.Harmonyos NEXT 图片预览组件架构设计与实现原理

embedded/2025/3/17 7:02:02/

温馨提示:本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦!

Harmonyos NEXT 图片预览组件架构设计与实现原理

文章目录

  • Harmonyos NEXT 图片预览组件架构设计与实现原理
    • 效果预览
    • 一、组件架构概述
      • 1. 核心组件层次结构
      • 2. 组件职责划分
      • 3. 数据模型设计
    • 二、PicturePreview组件实现
      • 1. 组件定义
      • 2. 核心功能实现
        • 2.1 图片列表管理
        • 2.2 图片切换控制
      • 3. 布局实现
    • 三、技术要点分析
      • 1. 懒加载实现
      • 2. 主轴与交叉轴处理
      • 3. 安全区域适配
    • 四、使用示例
    • 五、总结

效果预览

一、组件架构概述

图片预览组件是一个用于展示和交互图片的高级组件,采用分层设计模式,将复杂功能拆分为多个独立模块,提高代码的可维护性和复用性。组件架构如下:

1. 核心组件层次结构

PicturePreview (外层容器)└── PicturePreviewImage (内层图片组件)└── Image (基础图片渲染)

2. 组件职责划分

组件名称主要职责核心技术
PicturePreview图片列表管理、切换控制List、LazyForEach、ListScroller
PicturePreviewImage单张图片交互、手势处理matrix4、手势识别、偏移计算

3. 数据模型设计

图片预览组件使用多个数据模型来管理不同的状态:

  • ScaleModel: 管理图片缩放状态
  • RotateModel: 管理图片旋转状态
  • OffsetModel: 管理图片位移状态
  • CommonLazyDataSourceModel: 实现图片的懒加载

二、PicturePreview组件实现

1. 组件定义

@Component
export struct PicturePreview {// 滑动方向@Prop listDirection: Axis = Axis.Vertical;// 外部传入的图片数据@Link @Watch('getListMaxLength') imageList: string[];// 背景颜色@State listBGColor: Color = Color.White;// 图片懒加载数据源@State lazyImageList: CommonLazyDataSourceModel<string> = new CommonLazyDataSourceModel();// ...
}

2. 核心功能实现

2.1 图片列表管理
// 获取图片数量和设置懒加载图片数据
getListMaxLength() {this.listMaxLength = this.imageList.length;this.lazyImageList.clearAndPushAll(this.imageList)
}

这段代码实现了图片数据的初始化,将外部传入的图片列表转换为懒加载数据源,提高性能。

2.2 图片切换控制
// 改变到具体页面
setListToIndex = (index: number) => {const WIN_SIZE = windowSizeManager.get();let nIndex = index;if (nIndex < 0) {nIndex = 0} else if (nIndex >= this.listMaxLength) {nIndex = this.listMaxLength - 1}this.listIndex = nIndex;let principalAxisSize = this.listDirection === Axis.Horizontal ? WIN_SIZE.width : WIN_SIZE.heightlet calculatedOffset = Math.abs(nIndex * principalAxisSize) + this.listSpace * nIndex;this.listScroll.scrollTo({yOffset: this.listDirection === Axis.Horizontal ? 0 : calculatedOffset,xOffset: this.listDirection === Axis.Horizontal ? calculatedOffset : 0,animation: {duration: this.listAnimationDuration}})
}

这段代码实现了图片切换功能,通过计算偏移量并使用ListScroller控制滚动位置,实现图片的平滑切换。

3. 布局实现

build() {NavDestination() {List({ scroller: this.listScroll, space: this.listSpace }) {LazyForEach(this.lazyImageList, (imageUrl: string, index: number) => {ListItem() {PicturePreviewImage({imageUrl: imageUrl,listDirection: this.listDirection,setListOffset: this.setListOffset,setListToIndex: this.setListToIndex,imageIndex: index,imageMaxLength: this.listMaxLength,listBGColor: this.listBGColor})}.width("100%")})}.enableScrollInteraction(false) // 禁止List本身的滑动,避免滑动冲突// ...}
}

布局实现使用List组件和LazyForEach实现图片列表的渲染,通过禁用List的滚动交互,将滚动控制权交给PicturePreviewImage组件处理。

三、技术要点分析

1. 懒加载实现

图片预览组件使用CommonLazyDataSourceModel实现懒加载,只加载当前可见的图片,提高性能和内存利用率。

2. 主轴与交叉轴处理

组件支持水平和垂直两种滑动方向,通过listDirection属性控制:

let principalAxisSize = this.listDirection === Axis.Horizontal ? WIN_SIZE.width : WIN_SIZE.height

3. 安全区域适配

.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

通过expandSafeArea属性,确保组件在不同设备上的安全区域适配。

四、使用示例

@Entry
@Component
struct PicturePreviewSample {@State imageList: string[] = [];@State listDirection: Axis = Axis.Horizontal;aboutToAppear(): void {let imageSource:string = $r("app.media.02") as ESObject;this.imageList.push(imageSource,imageSource,imageSource)}build() {RelativeContainer() {PicturePreview({ imageList: this.imageList, listDirection: this.listDirection })}.height('100%').width('100%')}
}

五、总结

图片预览组件通过分层设计和数据模型抽象,实现了高性能、高可用性的图片预览体验。PicturePreview作为外层容器,负责图片列表的管理和切换,而内部的交互细节则由PicturePreviewImage组件处理,形成了清晰的职责划分。

组件的核心技术包括:

  1. 使用List和LazyForEach实现图片列表的高效渲染
  2. 通过ListScroller控制图片的切换
  3. 支持水平和垂直两种滑动方向
  4. 安全区域适配,确保在不同设备上的显示效果

在下一篇教程中,我们将深入探讨PicturePreviewImage组件的实现,了解图片的缩放、旋转和手势处理等功能的实现原理。


http://www.ppmy.cn/embedded/173277.html

相关文章

2.12[A]distribute sys

在分布式训练中&#xff0c;特别是使用3D并行&#xff08;数据并行、流水线并行和模型并行&#xff09;时&#xff0c;不同阶段的GPU可能因为通信或数据依赖而出现空闲时间&#xff0c;这些空闲时间就是所谓的“气泡”。这些气泡会降低整体的训练效率&#xff0c;导致GPU资源的…

<rust><tauri><GUI>基于tauri和rust,编写一个二维码生成器

前言 本文是基于rust和tauri&#xff0c;由于tauri是前、后端结合的GUI框架&#xff0c;既可以直接生成包含前端代码的文件&#xff0c;也可以在已有的前端项目上集成tauri框架&#xff0c;将前端页面化为桌面GUI。 环境配置 系统&#xff1a;windows 10平台&#xff1a;vis…

【机器学习-基础知识】统计和贝叶斯推断

1. 概率论基本概念回顾 1. 概率分布 定义: 概率分布(Probability Distribution)指的是随机变量所有可能取值及其对应概率的集合。它描述了一个随机变量可能取的所有值以及每个值被取到的概率。 对于离散型随机变量,使用概率质量函数来描述。对于连续型随机变量,使用概率…

HOT100系列——(普通数组+矩阵)

普通数组 1.合并区间 56. 合并区间https://leetcode.cn/problems/merge-intervals/ 先针对左区间进行排序&#xff0c;这样可以对右边进行考虑&#xff0c;如果intervals 中一个新的区间的左端点小于原ans的右端点&#xff0c;那么就能合并&#xff0c;右端点合并成原p【1】和…

基于SpringBoot3+Druid数据库连接池与外部PostgreSQL的Kubernetes Pod YAML全解析

说明 一个基于Spring Boot 3 Druid 外部PostgreSQL的Kubernetes Pod YAML详细解析&#xff0c;包含最佳实践和关键配置说明&#xff1a; YAML apiVersion: apps/v1 kind: Deployment metadata:name: springboot-applabels:app: springboot-app spec:replicas: 2selector:ma…

Spring AI 与 LangChain4j 选型对比分析

Spring AI 与 LangChain4j 选型对比分析 对比分析目前市场上两个主流的Java开源AI框架——Spring AI 和 LangChain4j&#xff0c;探讨它们的技术特点、适用场景以及未来发展的潜力。 一、易用性对比 Spring AI 优点 &#xff1a;对 Spring 开发者友好&#xff0c;通过自动配置…

Jdk7不同集合的扩容机制

Jdk7不同集合的扩容机制 集合类初始容量负载因子扩容公式扩容时机ArrayList10无新容量 旧容量 1.5元素数量超过容量时HashMap160.75新容量 旧容量 2元素数量超过 容量 负载因子 时HashSet160.75新容量 旧容量 2元素数量超过 容量 负载因子 时Vector10无新容量 旧容量…

科技工作者之家建设扬帆起航,为科技人才提供更多优质服务

大湾区经济网深圳讯&#xff0c;2025年3月11日&#xff0c;由深圳市高科技企业协同创新促进会主办的“科技工作者之家建设启动暨第五届新质生产力驱动成长型&制造业企业高质量发展专题咨询活动”在深圳凯宾斯基酒店隆重举行。本届高质量发展专题活动在往届成功经验的基础上…