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

温馨提示:本篇博客的详细代码已发布到 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.rhkb.cn/news/35011.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android 手机启动过程

梳理 为了梳理思路&#xff0c;笔者画了一幅关于 Android 手机启动的过程图片内容纯属个人见解&#xff0c;如有错误&#xff0c;欢迎各位指正

Chat-TTS-UI:文字转语音 - 本地部署方案

Chat-TTS-UI 是一个基于 ChatTTS 模型的本地网页界面,专为满足用户在信息过载时代轻松获取大量文字信息的需求而设计。它支持中英文混合输入、多种音色选择,并提供 API 接口,方便开发者集成到其他应用中。其简洁易用的网页界面、细粒度控制以及 GPU 加速等高级功能,使其广泛…

11. Pandas :操作Excel文件(Excel报表的案例研究)

从一个装有各种 Excel 文件的文件夹开始&#xff0c;这些文件需要被整合到 Excel 报表中。 它们包含了虚构的电信运营商在全美各营业厅的套餐&#xff08;金、银、铜&#xff09;销售情况。每个月有两个文件&#xff0c;子文件夹 new 中的是新用户&#xff0c;子文件夹 existin…

一周学会Flask3 Python Web开发-SQLAlchemy添加数据操作-班级模块

锋哥原创的Flask3 Python Web开发 Flask3视频教程&#xff1a; 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili SQLAlchemy提供session.add()方法添加model实体数据&#xff0c;以及提供session.commit()提交事务。 首先list.html加一个添…

大型语言模型与强化学习的融合:迈向通用人工智能的新范式——基于基础复现的实验平台构建

1. 引言 大型语言模型&#xff08;LLM&#xff09;在自然语言处理领域的突破&#xff0c;展现了强大的知识存储、推理和生成能力&#xff0c;为人工智能带来了新的可能性。强化学习&#xff08;RL&#xff09;作为一种通过与环境交互学习最优策略的方法&#xff0c;在智能体训…

Axure大屏可视化原型模板及素材:数据可视化的高效解决方案

数据可视化已成为企业决策、运营分析、市场洞察的重要工具。数据可视化大屏&#xff0c;作为数据展示和交互的直观平台&#xff0c;能够实时呈现关键数据&#xff0c;帮助企业快速做出决策。Axure作为原型设计领域的领先工具&#xff0c;以其丰富的组件库、强大的交互设计能力和…

图片填充容器,如何描述

【图片需要完全填充/拉伸以适应容器尺寸&#xff0c;不保持原始比例&#xff0c;使用 object-fit: fill 属性实现】 效果&#xff1a; 代码案例&#xff1a; <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8">&l…

缓存和客户端数据存储体系(Ark Data Kit)--- 应用数据持久化(首选项持久化、K-V、关系型数据库)持续更新中...

Core File Kit做怎删改查操作不便&#xff0c;用Ark Data Kit。 功能介绍 ArkData &#xff08;方舟数据管理&#xff09;为开发者提供数据存储、数据管理和数据同步能力&#xff0c;比如联系人应用数据可以保存到数据库中&#xff0c;提供数据库的安全、可靠以及共享访问等管…

RUOYI框架在实际项目中的应用三:Ruoyi微服务版本-RuoYi-Cloud

如需观看Ruoyi框架的整体介绍&#xff0c;请移步&#xff1a;RUOYI框架在实际项目中的应用一&#xff1a;ruoyi简介 一、Ruoyi微服务版本-Ruoyi微服务版本 1、官方资料 1&#xff1a;代码地址&#xff1a;https://gitee.com/y_project/RuoYi-Cloud.git 2&#xff1a;文档介绍…

windbg集成python环境(pykd)

背景: 调试FPU指令过程时&#xff0c;需要一直跟踪FPU Status寄存器TOP字段(ST寄存器对应的BC寄存器)&#xff0c;TOP寄存器位于FPU Status[13:11]&#xff0c;这种转换过程并非一目了然(如下图)&#xff1a; [Disassembly窗口fld指令执行后&#xff0c;Registers窗口中fpsw的…

微信小程序threejs三维开发

微信小程序threejs开发 import * as THREE from three; const { performance, document, window, HTMLCanvasElement, requestAnimationFrame, cancelAnimationFrame, core, Event, Event0 } THREE .DHTML import Stats from three/examples/jsm/libs/stats.module.js; im…

【算法】双指针、递归与回溯、排序、查找

⭐️个人主页&#xff1a;小羊 ⭐️所属专栏&#xff1a;Linux 很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~ 目录 持续更新中...1、双指针移动零复写零快乐数长度最小的子数组dd爱框框 2、递归与回溯3、排序算法4、查找算法 持续更新中… 1、双指…

How to install cangjie on Linux mint 22.1

概述 仓颉编程语言是一款面向全场景智能的新一代编程语言&#xff0c;主打原生智能化、天生全场景、高性能、强安全。主要应用于鸿蒙原生应用及服务应用等场景中&#xff0c;为开发者提供良好的编程体验。 今天&#xff0c;我们介绍一下仓颉语言在Linux mint 22.1上的安装。 …

杰理可视化SDK-手机三方通话控制

杰理可视化SDK-手机三方通话控制 手机三方通话功能杰理SDK三方通话控制SDK三方通话状态获取SDK三方通话处理 手机三方通话功能是手机常用的功能之一。本篇文章简单介绍了杰理可视化SDK在蓝牙耳机应用中&#xff0c;当手机存在三方通话来电或正在进行三方通话时&#xff0c;蓝牙…

【二分算法】-- 寻找旋转排序数组中的最小值

文章目录 1. 题目2. 题目解析3. 代码 1. 题目 在线oj 2. 题目解析 解法一&#xff1a;暴力查找最小值 时间复杂度&#xff1a;0(N) 解法二&#xff1a;二分查找算法 【二段性】&#xff1a; A~B&#xff1a;nums[i] > nums[i 1] C~D&#xff1a;nums[i] < nums[i…

音视频入门基础:RTCP专题(1)——RTCP官方文档下载

一、引言 实时传输控制协议&#xff08;Real-time Transport Control Protocol或RTP Control Protocol或简写RTCP&#xff09;是实时传输协议&#xff08;RTP&#xff09;的一个姐妹协议。RTCP由《RFC 3550》定义&#xff08;取代废弃的《RFC 1889》&#xff09;。RTP使用一个…

OrioleDB: 新一代PostgreSQL存储引擎

PostgreSQL 12 引入了可插拔式的表存储方法接口&#xff0c;允许为不同的表选择不同的存储机制&#xff0c;例如用于 OLTP 操作的堆表&#xff08;HEAP、默认&#xff09;、用于 OLAP 操作的列式表&#xff08;Citus&#xff09;&#xff0c;以及用于超快速搜索处理的内存表。 …

1.5 Spring Boot项目打包和运行

本文介绍了如何使用Spring Boot进行项目打包和运行。首先&#xff0c;讲解了如何将Spring Boot项目打包为可执行的JAR包&#xff0c;并直接运行&#xff0c;无需部署到外部Web服务器。接着&#xff0c;介绍了如何将项目打包为WAR包&#xff0c;以便部署到Web容器中&#xff0c;…

2.7 滑动窗口专题:串联所有单词的子串

LeetCode 30. 串联所有单词的子串算法对比分析 1. 题目链接 LeetCode 30. 串联所有单词的子串 2. 题目描述 给定一个字符串 s 和一个字符串数组 words&#xff0c;words 中所有单词长度相同。要求找到 s 中所有起始索引&#xff0c;使得从该位置开始的连续子串包含 words 中所…

vue中,watch里,this为undefined的两种解决办法

提示&#xff1a;vue中&#xff0c;watch里&#xff0c;this为undefined的两种解决办法 文章目录 [TOC](文章目录) 前言一、问题二、方法1——使用function函数代替箭头函数()>{}三、方法2——使用that总结 前言 ‌‌‌‌‌尽量使用方法1——使用function函数代替箭头函数()…