70.HarmonyOS NEXT PicturePreview组件深度剖析:从架构设计到核心代码实现
温馨提示:本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦!
HarmonyOS NEXT PicturePreview组件深度剖析:从架构设计到核心代码实现
文章目录
- HarmonyOS NEXT PicturePreview组件深度剖析:从架构设计到核心代码实现
- 一、组件整体架构
- 1. 组件功能
- 2. 技术栈
- 二、核心代码解析
- 1. 组件参数
- 2. 状态管理
- 3. 控制相关
- 三、关键方法详解
- 1. 数据初始化
- 2. 滚动控制逻辑
- 3. 页面跳转
- 四、UI构建逻辑
- 1. 列表构建
- 2. 列表配置
- 五、特殊处理说明
- 1. 透明边框处理
- 2. 背景色切换
- 六、组件使用示例
- 1. 父组件调用
- 2. 参数说明
- 七、性能优化点
一、组件整体架构
1. 组件功能
- 实现图片预览功能,支持水平和垂直滑动
- 支持懒加载和手势交互
- 可自定义背景色和切换动画
- 适配不同屏幕尺寸
2. 技术栈
HarmonyOS ETS + 自定义手势 + 矩阵变换 + 懒加载
二、核心代码解析
1. 组件参数
@Prop listDirection: Axis = Axis.Vertical // 滑动方向(默认垂直)
@Link @Watch('getListMaxLength') imageList: string[] // 双向绑定的图片数据源
- @Prop:父组件传入的不可变参数
- @Link:实现父子组件双向数据绑定
- @Watch:当imageList变化时自动触发getListMaxLength
2. 状态管理
@State listBGColor: Color = Color.White // 背景色状态
@State lazyImageList: CommonLazyDataSourceModel<string> // 懒加载数据源
- @State:组件内部状态,变化触发UI更新
- CommonLazyDataSourceModel:优化内存的懒加载模型
3. 控制相关
private listScroll: ListScroller = new ListScroller() // 列表滚动控制器
private listAnimationDuration: number = 500 // 滑动动画时长
- ListScroller:精确控制列表滚动位置
- 动画时长控制滑动流畅度
三、关键方法详解
1. 数据初始化
aboutToAppear(): void {this.getListMaxLength()
}getListMaxLength() {this.listMaxLength = this.imageList.lengththis.lazyImageList.clearAndPushAll(this.imageList)
}
- 生命周期:组件创建时触发
- 数据转换:将普通数组转为懒加载数据源
2. 滚动控制逻辑
setListOffset(offset: number, animationDuration: number = 0) {const WIN_SIZE = windowSizeManager.get()// 计算主轴尺寸let principalAxisSize = this.listDirection === Axis.Horizontal ? WIN_SIZE.width : WIN_SIZE.height// 计算偏移量let principalAxisOffset = principalAxisSize * this.listIndex + this.listSpace * this.listIndex// 执行滚动this.listScroll.scrollTo({yOffset: this.listDirection === Axis.Horizontal ? 0 : principalAxisOffset,xOffset: this.listDirection === Axis.Horizontal ? principalAxisOffset : 0,animation: { duration: animationDuration }})
}
- 窗口适配:通过windowSizeManager获取屏幕尺寸
- 方向判断:根据滑动方向计算不同轴向的偏移量
- 平滑滚动:支持自定义动画时长
3. 页面跳转
setListToIndex(index: number) {// 边界检查let nIndex = Math.max(0, Math.min(index, this.listMaxLength - 1))// 计算目标位置const principalAxisSize = this.listDirection === Axis.Horizontal ? windowSizeManager.get().width : windowSizeManager.get().heightconst calculatedOffset = nIndex * (principalAxisSize + this.listSpace)// 执行跳转this.listScroll.scrollTo({xOffset: this.listDirection === Axis.Horizontal ? calculatedOffset : 0,yOffset: this.listDirection === Axis.Vertical ? calculatedOffset : 0,animation: { duration: this.listAnimationDuration }})
}
- 安全处理:限制index在有效范围内
- 精确计算:考虑列表间距(listSpace)的影响
- 动画控制:使用预设动画时长保证体验一致
四、UI构建逻辑
1. 列表构建
List({ scroller: this.listScroll, space: this.listSpace
}) {LazyForEach(this.lazyImageList, (imageUrl: string, index: number) => {ListItem() {PicturePreviewImage({imageUrl: imageUrl,// 传递参数...})}.width("100%")})
}
- LazyForEach:优化性能的懒加载循环
- ListItem:每个图片项的容器
- width(“100%”):撑满父容器宽度
2. 列表配置
.enableScrollInteraction(false) // 禁用默认滑动
.scrollSnapAlign(ScrollSnapAlign.START) // 对齐方式
.cachedCount(1) // 缓存数量
.listDirection(this.listDirection) // 滑动方向
.scrollBar(BarState.Off) // 隐藏滚动条
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
- 关键配置:
enableScrollInteraction(false)
:避免与自定义手势冲突cachedCount(1)
:平衡内存与性能expandSafeArea
:适配系统安全区域
五、特殊处理说明
1. 透明边框处理
.borderWidth(1)
.borderColor(Color.Transparent)
- 问题背景:修复鸿蒙系统Y轴定位异常
- 解决方案:添加透明边框占位
- 注意事项:不可移除,等待系统修复
2. 背景色切换
.onClick(() => {this.listBGColor = this.listBGColor === Color.White ? Color.Black : Color.White
})
- 交互功能:点击列表切换背景色
- 实现原理:通过@State触发重新渲染
六、组件使用示例
1. 父组件调用
@Entry
@Component
struct Example {@State images: string[] = ["common/image1.jpg","common/image2.jpg","common/image3.jpg"]build() {Column() {PicturePreview({imageList: $rawfile(this.images),listDirection: Axis.Horizontal})}}
}
2. 参数说明
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
imageList | string[] | 是 | 图片路径数组 |
listDirection | Axis | 否 | 滑动方向(默认垂直) |
七、性能优化点
-
懒加载机制:
- 使用
LazyForEach
按需创建列表项 cachedCount(1)
减少内存占用
- 使用
-
渲染优化:
- 固定尺寸计算避免重复布局
- 禁用不必要的滚动条
-
手势优化:
- 自定义手势控制替代系统滚动
- 精准的动画时长控制
相关文章:
70.HarmonyOS NEXT PicturePreview组件深度剖析:从架构设计到核心代码实现
温馨提示:本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦! HarmonyOS NEXT PicturePreview组件深度剖析:从架构设计到核心代码实现 文章目录 HarmonyOS NEXT PicturePreview组件深度剖析…...
如何从受 Cloudflare 保护的网站提取数据:技术与挑战
引言 Web抓取是数据科学和市场研究的重要工具,但当面对受Cloudflare等先进保护系统守护的网站时,这项任务变得异常具有挑战性。Cloudflare的机器人检测系统需要精心设计的网页抓取解决方案才能成功提取数据。本文将介绍Cloudflare的防护机制以及如何使用…...
【DeepSeek应用】DeepSeek模型本地化部署方案及Python实现
DeepSeek实在是太火了,虽然经过扩容和调整,但反应依旧不稳定,甚至小圆圈转半天最后却提示“服务器繁忙,请稍后再试。” 故此,本文通过讲解在本地部署 DeepSeek并配合python代码实现,让你零成本搭建自己的AI助理,无惧任务提交失败的压力。 一、环境准备 1. 安装依赖库 …...
WPF程序使用AutoUpdate实现自动更新
AutoUpdate.NET使用 一、AutoUpdater.NET 简介 AutoUpdater.NET 是一个开源库,支持从各种源(如GitHub、FTP、HTTP服务器等)下载并安装更新。它提供了灵活的配置选项,允许开发者根据需求定制更新检查逻辑和用户体验。 二、安装 …...
A SURVEY ON POST-TRAINING OF LARGE LANGUAGE MODELS——大型语言模型的训练后优化综述——第2部分
3、微调(上一部分内容) 4、LLMs的对齐 大型语言模型(LLMs)中的对齐涉及引导模型输出以符合人类预期和偏好,特别是在安全关键或用户面对的应用程序中。本章讨论了实现对齐的三个主要范式: 带有反馈的人工…...
【2025】Electron Git Desktop 实战一(上)(架构及首页设计开发)
源代码仓库: Github仓库【electron_git】 Commit : bb40040 Github Desktop 页面分析 本节目标: 1、实现类似Github Desktop的「空仓库」提示页 2、添加本地仓库逻辑编写从 Github Desktop 我们看到 他的 主要页面分为三个区域 Head头部区域…...
996引擎-问题处理:缺失特效分割文件 ModelAtlasSplitConfigs
通常我们买的资源都是带会 ModelAtlasSplitConfigs.txt 或 sceneAtlasSplitConfigs.txt 的 但有时确实找不到的话,是可以用996工具生成的:...
2024年12月CCF-GESP编程能力等级认证C++编程三级真题解析
三级真题的难度: CCF-GESP编程能力等级认证的C++三级真题难度通常被认为是中等水平,适合具备一定编程基础的考生。以下是关于三级真题难度的一些具体信息: 1. 考试内容 C++三级考试主要涵盖以下几个方面的知识: 基本语法:包括数据类型、变量、运算符等基础知…...
Java面试八股—Redis篇
一、Redis的使用场景 (一)缓存 1.Redis使用场景缓存 场景:缓存热点数据(如用户信息、商品详情),减少数据库访问压力,提升响应速度。 2.缓存穿透 正常的访问是:根据ID查询文章&…...
机器人ROS学习:Ubuntu22.04安装ROS2和Moveit2实现运动规划
通过本篇文章学习,你可以收获以下内容: 学会在 Ubuntu22.04 上安装 Moveit2学会下载编译运行 Moveit2 样例程序学会使用样例程序进行运动规划等 版本平台 系统版本:ubuntu22.04ROS2 版本:humbleMoveit 版本:moveit2…...
树结构和数组之间的转化
1、树结构转为数组 treeToArray(treeData, returnValue []) { let newValue [...returnValue] treeData.map(item > { if (item.children) { const { children, ...treeObj } { ...item } newValue.push(treeObj) newValue this.treeToArray(children, newValue) } else…...
2024华东师范大学计算机复试上机真题
2024华东师范大学计算机复试机试真题 2023华东师范大学计算机复试机试真题 2022华东师范大学计算机复试机试真题 2024华东师范大学计算机复试上机真题 2023华东师范大学计算机复试上机真题 2022华东师范大学计算机复试上机真题 在线评测:传动门:pgcode…...
Blender-MCP服务源码3-插件开发
Blender-MCP服务源码3-插件开发 Blender-MCP服务源码解读-如何进行Blender插件开发 1-核心知识点 1)使用Blender开发框架学习如何进行Blender调试2)学习目标1-移除所有的Blender业务-了解如何MCP到底做了什么?3)学习目标2-模拟MC…...
C++复试笔记(三)
1.友元函数和友元类 1.1友元函数 友元函数的经典实例是重载 "<<" 和 ">>" ,去重载operator<<,然后发现没办法将operator<<重载成成员函数。因为cout的 输出流对象和隐含的this指针在抢占第一个参数的位置。this指针默…...
【数学基础】概率与统计#1概率论与信息论初步
本系列内容介绍: 主要参考资料: 《深度学习》[美]伊恩古德菲洛 等 著 《机器人数学基础》吴福朝 张铃 著 文章为自学笔记,默认读者有一定的大学数学基础,仅供参考。 目录 随机变量概率分布离散型随机变量和概率质量函数连续型变量…...
掌握这些 UI 交互设计原则,提升产品易用性
在当今数字化时代,用户对于产品的体验要求越来越高,UI 交互设计成为决定产品成败的关键因素之一。一个易用的产品能够让用户轻松、高效地完成各种操作,而实现这一目标的核心在于遵循一系列科学合理的 UI 交互设计原则。本文将详细阐述简洁性、…...
工程化与框架系列(32)--前端测试实践指南
前端测试实践指南 🧪 引言 前端测试是保证应用质量的重要环节。本文将深入探讨前端测试的各个方面,包括单元测试、集成测试、端到端测试等,并提供实用的测试工具和最佳实践。 测试概述 前端测试主要包括以下类型: 单元测试&a…...
Python----计算机视觉处理(opencv:像素,RGB颜色,图像的存储,opencv安装,代码展示)
一、计算机眼中的图像 像素 像素是图像的基本单元,每个像素存储着图像的颜色、亮度和其他特征。一系列像素组合到一起就形成 了完整的图像,在计算机中,图像以像素的形式存在并采用二进制格式进行存储。根据图像的颜色不 同,每个像…...
表单 schema 配置化
一、前沿 基于 Ant Design Vue 组件库实现了表单的配置化生成,通过 schema 配置化的方式实现表单的动态渲染、数据绑定和更新等功能,而提交按钮及获取数据逻辑由使用方自行提供。通过 schema 对象来定义表单的结构和属性,modelData 对象存储…...
Java数据结构第二十三期:Map与Set的高效应用之道(二)
专栏:Java数据结构秘籍 个人主页:手握风云 目录 一、哈希表 1.1. 概念 1.2. 冲突 1.3. 避免冲突 1.4. 解决冲突 1.5. 实现 二、OJ练习 2.1. 只出现一次的数字 2.2. 随机链表的复制 2.3. 宝石与石头 一、哈希表 1.1. 概念 顺序结构以及平衡树中…...
unity生命周期
unity的生命周期 都是有序的1. 实例化与初始化阶段Awake()OnEnable() 2. 开始与更新阶段Start()FixedUpdate()Update()LateUpdate() 3. 渲染阶段OnPreCull()OnBecameVisible() 和 OnBecameInvisible()OnWillRenderObject()OnRenderObject()OnPostRender() 4. 销毁阶段OnDisable…...
对比学习(Contrastive Learning)
1. 概念 对比学习(Contrastive Learning)是一种自监督学习(Self-Supervised Learning)方法,其核心思想是通过相似样本靠近,不同样本远离的方式学习数据的潜在表示。它广泛用于无标签数据的特征提取&#x…...
C语言输入与输出:从零掌握数据的“对话”
手把手教你理解C语言中输入(Input)与输出(Output)的核心操作。 一、输入与输出是什么? C语言通过标准库函数实现程序与用户(或设备)的“对话”: 输出:程序将数据展示给…...
PyCharm 2019.1.3使用python3.9创建虚拟环境setuptools-40.8.0报错处理
目录 前置: 一劳永逸方法(缺最后一步,没有成行) step one: 下载高版本的pip、setuptools、virtualenv的tar.gz包 step two: 进入PyCharm安装目录的 helpers 目录下 step three: 下载并安装grep和sed命令,然后执行 …...
从0到1构建AI深度学习视频分析系统--基于YOLO 目标检测的动作序列检查系统:(2)消息队列与消息中间件
文章大纲 原始视频队列Python 内存视频缓存优化方案(4GB 以内)一、核心参数设计二、内存管理实现三、性能优化策略四、内存占用验证五、高级优化技巧六、部署建议检测结果队列YOLO检测结果队列技术方案一、技术选型矩阵二、核心实现代码三、性能优化策略四、可视化方案对比五…...
Redis基本命令手册——五大类型
目录 一:基本操作 二:字符串(String) 三:哈希(Hash) 四:列表(List) 五:集合(Set) 六:有序集合(Zset&…...
Java 大视界 -- Java 大数据在智能金融资产定价与风险管理中的应用(134)
💖亲爱的朋友们,热烈欢迎来到 青云交的博客!能与诸位在此相逢,我倍感荣幸。在这飞速更迭的时代,我们都渴望一方心灵净土,而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识,也…...
Linux 系统蓝牙音频服务实现分析
Linux 系统蓝牙音频服务实现分析 蓝牙音频设备连接管理Linux 系统中,蓝牙音频服务实现为系统音频服务 PulseAudio 的可加载模块,它用来以 PulseAudio 标准的方式描述蓝牙音频设备,将其嵌入 PulseAudio 的音频处理流水线,并呈现给用户,支持用户切换音频设备,如蓝牙耳机。 …...
PyTorch 深度学习实战(14):Deep Deterministic Policy Gradient (DDPG) 算法
在上一篇文章中,我们介绍了 Proximal Policy Optimization (PPO) 算法,并使用它解决了 CartPole 问题。本文将深入探讨 Deep Deterministic Policy Gradient (DDPG) 算法,这是一种用于连续动作空间的强化学习算法。我们将使用 PyTorch 实现 D…...
craftjs的示例landing项目改成APP路由
下载项目 项目地址是:https://github.com/prevwong/craft.js 示例项目在examples文件夹下面landing文件夹 修改 1.修改依赖包 由于craftjs使用的多包管理,示例项目中craftjs/core和craftjs/layers使用的是工作区路径,这里需要修改版本 …...
java -jar 执行基于Maven构建的Java应用的方法总结
一、Maven pom.xml文件未指定主类的情况 1、用Maven打包 mvn clean package -DskipTests 2、用java命令执行jar包 java -cp maven-allin-mainclass-demo-1.0-SNAPSHOT.jar org.example.Main 二、Maven pom.xml文件指定主类的情况 1、pom.xml文件指定主类,有两种…...
前端发布缓存导致白屏解决方案
解决发布H5后因为本地缓存白屏方案 一、 核心配置优化(前提是访问网站的请求能抵达服务器) 方案一:前端项目设置全局不缓存方案 运行逻辑:在H5服务器配置中增加Cache-Control: no-cache或max-age0响应头,禁用静态资…...
【后端】【django】Django 自带的用户系统与 RBAC 机制
Django 自带的用户系统与 RBAC 机制 Django 自带的用户系统(django.contrib.auth)提供了 身份验证(Authentication) 和 权限管理(Authorization),能够快速实现 用户管理、权限控制、管理员后台…...
SpringBoot MCP 入门使用
随着AI的火爆,最近发现MCP在未来确实大有可为,作为一名javaer怎么可以落后在历史洪流呢,根据官网和cursor也从零开始体验一下自定义mcp server。以后可以根据自己业务场景做出各种适合自身业务的工具。 至于什么是MCP 可以到https://modelcon…...
Java使用JDBC连接操作Sqlite 笔记250314
Java使用JDBC连接操作Sqlite 以下是使用 Java JDBC 连接和操作 SQLite 数据库的详细步骤: 1. 添加 SQLite JDBC 驱动 在项目中引入 SQLite JDBC 驱动依赖。 Maven 项目在 pom.xml 中添加:<dependency><groupId>org.xerial</groupId>…...
每日一题---腐烂的苹果(广度优先搜索)
腐烂的苹果 给定一个 nm nm 的网格,其中每个单元格中可能有三种值中的一个 0 , 1 , 2。 其中 0 表示这个格子为空、1 表示这个格子有一个完好的苹果,2 表示这个格子有一个腐烂的苹果。 腐烂的苹果每分钟会向上下左右四个方向的苹果传播一次病菌&…...
Visual Studio里的调试(debugging)功能介绍
参考 1- Introduction to Debugging | Basic Visual Studio Debugging(这是一位印度博主视频,我下面做到笔记也主要参考她的视频,但不得不说口音太重了,一股咖喱味) 目录 个人对调试浅显的认识和对调试的介绍逐行调…...
10.2linux内核定时器实验(详细编程)_csdn
我尽量讲的更详细,为了关注我的粉丝!!! 本章使用通过设置一个定时器来实现周期性的闪烁 LED 灯,因此本章例程就使用到了一个LED 灯。 这里我们以毫秒为单位,所以要用msecs_to_jiffies这个函数。 如果是2s就…...
机器学习——正则化、欠拟合、过拟合、学习曲线
过拟合(overfitting):模型只能拟合训练数据的状态。即过度训练。 避免过拟合的几种方法: ①增加全部训练数据的数量(最为有效的方式) ②使用简单的模型(简单的模型学不够,复杂的模型学的太多&am…...
Java多线程与高并发专题——阻塞和非阻塞队列的并发安全原理是什么?
引入 之前我们探究了常见的阻塞队列的特点,在本文我们就以 ArrayBlockingQueue 为例,首先分析 BlockingQueue ,也就是阻塞队列的线程安全原理,然后再看看它的兄弟——非阻塞队列的并发安全原理。 ArrayBlockingQueue 源码分析 …...
git 撤销某次提交的上交到远程服务器的commit提交,此提交后面的commit需要保留【deeepseek生成】
核心思路 使用 git rebase -i 重写提交历史,删除目标提交后强制推送到远程(需谨慎操作)。 操作步骤 1. 确认要删除的提交位置 # 查看提交历史(找到要删除的提交哈希,例如 a1b2c3d) git log --oneline查看提…...
docker composeyaml文件,什么是swap-space,内存不足硬盘来凑,--ipc=host,yaml文件、环境变量、容器报警健康检查
--swap-space 参数明确针对的是系统内存(RAM),与显存(GPU Memory)无关。以下是关键区分: 内存(RAM) vs 显存(GPU Memory) 类型内存(RAMÿ…...
tsfresh:时间序列特征自动提取与应用
tsfresh:时间序列特征自动提取与应用 本文系统介绍了 tsfresh 技术在 A 股市场数据分析与量化投资中的应用。从基础特征提取到高级策略开发,结合实战案例,详细讲解了如何利用 tsfresh 构建量化投资策略,并优化风险控制,…...
【A2DP】深入解读A2DP中通用访问配置文件(GAP)的互操作性要求
目录 一、模式支持要求 1.1 发现模式 1.2 连接模式 1.3 绑定模式 1.4 模式间依赖关系总结 1.5 注意事项 1.6 协议设计深层逻辑 二、安全机制(Security Aspects) 三、空闲模式操作(Idle Mode Procedures) 3.1 支持要求 …...
CUDA编程之内存
CUDA的内存类型有全局内存、共享内存、常量内存、纹理内存、本地内存、寄存器等。我们需要分别了解它们的特点和使用场景。在CUDA编程中,合理利用各种内存类型对性能优化至关重要。 1. 全局内存(Global Memory) 特点:设…...
【Agent实战】货物上架位置推荐助手(RAG方式+结构化prompt(CoT)+API工具结合ChatGPT4o能力Agent项目实践)
本文原创作者:姚瑞南 AI-agent 大模型运营专家,先后任职于美团、猎聘等中大厂AI训练专家和智能运营专家岗;多年人工智能行业智能产品运营及大模型落地经验,拥有AI外呼方向国家专利与PMP项目管理证书。(转载需经授权) 目录 结论 效果图示 1.prompt 2. API工具封…...
ffmpeg面试题整理
1. 基础概念 问题:FFmpeg 是什么?它的核心功能有哪些? 编解码:支持几乎所有音视频格式(如 H.264, AAC, MP3)。转换:在不同容器格式之间转换(如 MP4 → MKV)。流处理&…...
Idea运行项目报错:java.lang.OutOfMemoryError: Java heap space 解决方法
问题描述 Maven构建的时候,一直报错java.lang.OutOfMemoryError: Java heap space 尝试解决 找了几个JAVA高级小伙伴,一起去百度了各种可能,设置内存大小,发现都不行,还不断的重装了IDEA,以为是这个版本…...
解决 Linux /dev/mapper/ubuntu--vg-ubuntu--lv 磁盘空间不足的问题
解决 Linux /dev/mapper/ubuntu–vg-ubuntu–lv 磁盘空间不足的问题 https://blog.csdn.net/weixin_47908992/article/details/139882219 查看LVM卷组的信息 vgdisplay rootubuntu:~# vgdisplay--- Volume group ---VG Name ubuntu-vgSystem ID Fo…...
前端UI编程基础知识:基础三要素(结构→表现→行为)
以下是重新梳理的前端UI编程基础知识体系,结合最新技术趋势与实战要点,以更适合快速掌握的逻辑结构呈现: 一、基础三要素(结构→表现→行为) 1. HTML5 核心能力 • 语义化标签:<header>, <nav&g…...