QML路径视图(The PathView)

news2024/9/8 23:12:50

路径视图(PathView)非常强大,但也非常复杂,这个视图由QtQuick提供。它创建了一个可以让子项沿着任意路径移动的视图。沿着相同的路径,使用缩放(scale),透明(opacity)等元素可以更加详细的控制过程。

当使用路径视图(PathView)时,你必须定义一个代理和一个路径。在这些之上,路径视图(PathView)本身也可以自定义一些属性的区间。通常会使用pathItemCount属性,它控制了一次可见的子项总数。preferredHighLightBegin属性控制了高亮区间,preferredHighlightEnd与highlightRangeMode,控制了当前项怎样沿着路径显示。

在关注高亮区间之前,我们必须先看看路径(path)这个属性。路径(path)属性使用一个路径(path)元素来定义路径视图(PathView)内代理的滚动路径。路径使用startx与starty属性来链接路径(path)元素,例如PathLine,PathQuad和PathCubic。这些元素都使用二维数组来构造路径。

当路径定义好之后,可以使用PathPercent和PathAttribute元素来进一步设置。它们被放置在路径元素之间,并且为经过它们的路径和代理提供更加细致的控制。PathPercent提供了如何控制每个元素之间覆盖区域部分的路径,然后反过来控制分布在这条路径上的代理元素,它们被按比例的分布播放。

preferredHightlightBegin与preferredHighlightEnd属性由PathView(路径视图)输入到图片元素中。它们的值在0~1之间。结束值大于等于开始值。例如设置这些属性值为0.5,当前项只会显示当前百分之50的图像在这个路径上。

在Path中,PathAttribute元素也是被放置在元素之间的,就像PathPercent元素。它们可以让你指定属性的值然后插入的路径中去。这些属性与代理绑定可以用来控制任意的属性。

下面这个例子展示了路径视图(PathView)如何创建一个卡片视图,并且用户可以滑动它。我们使用了一些技巧来完成这个例子。路径由PathLine元素组成。使用PathPercent元素,它确保了中间的元素居中,并且给其它的元素提供了足够的空间。使用PathAttribute元素来控制旋转,大小和深度值(z-value)。

在这个路径之上(path),需要设置路径视图(PathView)的pathItemCount属性。它控制了路径的浓密度。路径视图的路径(PathView.onPath)使用preferredHighlightBegin与preferredHighlightEnd来控制可见的代理项。

1.PathView {
2.        anchors.fill: parent
3.
4.        delegate: flipCardDelegate
5.        model: 100
6.
7.        path: Path {
8.            startX: root.width/2
9.            startY: 0
10.
11.            PathAttribute { name: "itemZ"; value: 0 }
12.            PathAttribute { name: "itemAngle"; value: -90.0; }
13.            PathAttribute { name: "itemScale"; value: 0.5; }
14.            PathLine { x: root.width/2; y: root.height*0.4; }
15.            PathPercent { value: 0.48; }
16.            PathLine { x: root.width/2; y: root.height*0.5; }
17.            PathAttribute { name: "itemAngle"; value: 0.0; }
18.            PathAttribute { name: "itemScale"; value: 1.0; }
19.            PathAttribute { name: "itemZ"; value: 100 }
20.            PathLine { x: root.width/2; y: root.height*0.6; }
21.            PathPercent { value: 0.52; }
22.            PathLine { x: root.width/2; y: root.height; }
23.            PathAttribute { name: "itemAngle"; value: 90.0; }
24.            PathAttribute { name: "itemScale"; value: 0.5; }
25.            PathAttribute { name: "itemZ"; value: 0 }
26.        }
27.
28.        pathItemCount: 16
29.
30.        preferredHighlightBegin: 0.5
31.        preferredHighlightEnd: 0.5
32.    }

 

代理如下面所示,使用了一些从PathAttribute中链接的属性,itemZ,itemAngle和itemScale。需要注意代理链接的属性只在wrapper中可用。因此,rotxs属性在Rotation元素中定义为可访问值。

另一个需要注意的是路径视图(PathView)链接的PathView.onPath属性的用法。通常对于这个属性都绑定为可见,这样允许路径视图(PathView)缓冲不可见的元素。这不是通过剪裁处理来实现的,因为路径视图(PathView)的代理比其它的视图,例如链表视图(ListView)或者栅格视图(GridView)放置更加随意。

1. Component {
2.        id: flipCardDelegate
3.
4.        Item {
5.            id: wrapper
6.
7.            width: 64
8.            height: 64
9.
10.            visible: PathView.onPath
11.
12.            scale: PathView.itemScale
13.            z: PathView.itemZ
14.
15.            property variant rotX: PathView.itemAngle
16.            transform: Rotation { axis { x: 1; y: 0; z: 0 } angle: wrapper.rotX; origin { x: 32; y: 32; } }
17.
18.            Rectangle {
19.                anchors.fill: parent
20.                color: "lightGray"
21.                border.color: "black"
22.                border.width: 3
23.            }
24.
25.            Text {
26.                anchors.centerIn: parent
27.                text: index
28.                font.pixelSize: 30
29.            }
30.        }
31.    }

当在路径视图(PathView)上使用图像转换或者其它更加复杂的元素时,有一个性能优化的技巧是绑定图像元素(Image)的smooth属性与PathView.view.moving属性。这意味着图像在移动时可能不够完美,但是能够比较平滑的转换。当视图在移动时,对于平滑缩放的处理是没有意义的,因为用户根本看不见这个过程。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/489252.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

nssctf (1)

[NISACTF 2022]popchains Happy New Year~ MAKE A WISH <?phpecho Happy New Year~ MAKE A WISH<br>;if(isset($_GET[wish])){ #通过get获取wish的值 并判断是不是空@unserialize($_GET[wish]); #反序列化wish } else{$a=new Road_is_Long; #实例化Road_is…

YOLOv5:添加SE、CBAM、CoordAtt、ECA注意力机制

YOLOv5&#xff1a;添加SE、CBAM、CoordAtt、ECA注意力机制 前言前提条件相关介绍注意力机制SE添加SE注意力机制到YOLOv5 CBAM添加CBAM注意力机制到YOLOv5 CoordAtt添加CoordAtt注意力机制到YOLOv5 ECA添加ECA注意力机制到YOLOv5 参考 前言 记录在YOLOv5添加注意力机制&#xf…

原神3.2真端完整版架设教程

想必在座的各位都玩过这款游戏吧、开放世界的玩法、折磨人的剧情、做不完的任务、话多且烦人的派蒙、没眼看的伤害、贵到爆的抽卡、打不动的深渊、树脂刷空也刷不到想要的圣遗物、打不动的BOSS、这怎么受得了呀!反正我是受不了。废话不多说、教程开始。 准备工具: 一台16H 3…

【经典面试题】请使用C语言编程实现对IPV4地址的合法性判断

C语言编程实现对IPV4地址的合法性判断 有了解过我的朋友&#xff0c;可能有点印象&#xff0c;我在N年前的博客中&#xff0c;就写了这个主题&#xff0c;当时确实是工作中遇到了这个问题。本想着等工作搞完之后&#xff0c;就把这个问题的解决代码补上&#xff0c;结果一鸽&am…

MATLAB实现工业PCB电路板缺陷识别和检测

PCB&#xff08;PrintedCircuitBoard印刷电路板&#xff09;是电子产品中众多电子元器件的承载体&#xff0c;它为各电子元器件的秩序连接提供了可能&#xff0c;PCB已成为现代电子产品的核心部分。随着现代电子工业迅猛发展&#xff0c;电子技术不断革新&#xff0c;PCB密集度…

K8S常见异常事件与解决方案

集群相关 Coredns容器或local-dns容器重启 集群中的coredns组件发生重启(重新创建)&#xff0c;一般是由于coredns组件压力较大导致oom&#xff0c;请检查业务是否异常&#xff0c;是否存在应用容器无法解析域名的异常。 如果是local-dns重启&#xff0c;说明local-dns的性能…

fastai2 实现SSD

https://github.com/search?qfastaissd 有几个值得参考的代码&#xff0c;好好学习。 GitHub - Samjoel3101/SSD-Object-Detection: I am working on a SSD Object Detector using fastai and pytorch fastai2实现的SSD&#xff0c;终于找到了code。https://github.com/sidrav…

等保定级怎么做

Q25:现在还没做等保还来得及吗?有什么影响? 答:来得及。种一棵树,最好的时间是十年前,其次是现在。可先根据定级备案要求和流程,先向公安递交定级备案文件,测评与整改预算提上日程,在经费未落实前,可以先进行系统定级、差距分析、整改计划制订等工作。 根据《等保工…

LVGL移植——stm32f4

LVGL移植说明 移植LVGL版本&#xff1a;8.3.6 主控&#xff1a;STM32F407ZGT6 github链接&#xff1a;https://github.com/lvgl/lvgl.git 文章目录 LVGL移植说明STM32移植LVGL①需要的依赖文件②移植显示驱动文件③将文件加入工程当中④配置心跳④修改栈堆的空间⑤编译链接 STM…

02-权限提升-Win溢出漏洞及ATSCPS提权

权限提升-Win溢出漏洞及AT&SC&PS提权 思维导图 明确权限提升基础知识&#xff1a;权限划分 明确权限提升环境问题&#xff1a;web及本地 web提权&#xff1a;已有网站权限&#xff08;可以操作网站内容&#xff0c;但无法操作服务器&#xff09;&#xff0c;想要获得…

【软考中级】2022下半年软件设计师综合知识真题与答案

1、以下关于R1SC(精简指令集计算机)特点的叙述中&#xff0c;错误的是()。 A.对存储器操作进行限制&#xff0c;使控制简单化 B.指令种类多&#xff0c;指令功能强 C.设置大量通用寄存器 D.选取使用频率较高的一些指令&#xff0c;提高执行速度 参考答案&#xff1a;B 2、…

Qt6之KDE框架

25年来&#xff0c;KDE社区一直在使用Qt开发各种自由软件产品。其中包括Plasma桌面环境&#xff0c;像Krita和Kdenlive这样的创意工具&#xff0c;像GCompris这样的教育应用程序&#xff0c;像Kontact这样的群件套件以及无数其他应用程序&#xff0c;实用程序和小部件。 Qt以其…

Shell+VCS学习3---VCS命令

1 VCS介绍 VCS的功能可以大致分为两个大类&#xff1a;编译和仿真。 VCS编译的过程&#xff0c;就是经过一系列的操作&#xff0c;将verilog代码转换为可执行文件&#xff08;.svim&#xff09;&#xff0c;接下来就是用dve进行仿真过程生成.vpd波形文件。 VCS是编译型verilo…

C++---树形DP---树的最长路径(每日一道算法2023.5.4)

注意事项&#xff1a; 本题为"树与图的DFS深度优先遍历—树的重心"的近似题&#xff0c;同时涉及到 单链表模拟邻接表存储图 的操作&#xff0c;建议先理解那篇文章。 题目&#xff1a; 给定一棵树&#xff0c;树中包含 n 个结点&#xff08;编号1~n&#xff09;和 …

JavaScript:栈和对列

文章目录 栈和对列Js 有栈与队列吗20. 有效的括号 - 力扣&#xff08;LeetCode&#xff09;思路 1047. 删除字符串中的所有相邻重复项 - 力扣&#xff08;LeetCode&#xff09;思路代码分析array.join() 操作打印const s of str 操作遍历 150. 逆波兰表达式求值 - 力扣&#xf…

(1)QT基础铺垫

目录 1.Qt特性 2. 新建项目 3. 工作目录与构建目录 4. 工作目录 4.1 .pro 项目配置文件 4.2 dialog.h 4.3 dialog.cpp 4.4 main.cpp 5. 帮助文档 6. 调试信息 1.Qt特性 Qt经常被当作是一个基于c语言的gui开发框架&#xff0c;但是这并不是qt的全部&#xff0c;除了开…

助力工业物联网,工业大数据之ODS层构建:申明分区代码及测试【十】

文章目录 知识点13&#xff1a;ODS层构建&#xff1a;申明分区代码及测试知识点14&#xff1a;ODS层与DWD层区别知识点15&#xff1a;DWD层构建&#xff1a;需求分析知识点16&#xff1a;DWD层构建&#xff1a;建库实现测试知识点17&#xff1a;DWD层构建&#xff1a;建表实现测…

Packet Tracer – 研究 VLAN 实施

Packet Tracer – 研究 VLAN 实施 地址分配表 设备 接口 IP 地址 子网掩码 默认网关 S1 VLAN 99 172.17.99.31 255.255.255.0 不适用 S2 VLAN 99 172.17.99.32 255.255.255.0 不适用 S3 VLAN 99 172.17.99.33 255.255.255.0 不适用 PC1 NIC 172.17.10.2…

Linux部署Gitlab/上传项目

一、提前准备 1.1安装依赖工具 yum install -y curl policycoreutils-python openssh-serversystemctl start sshd systemctl enable sshd 1.2安装Postfix邮件服务器 #安装 postfix yum install -y postfix#启动 postfix 并设置为开机启动 systemctl enable postfix systemctl …

HashCode与String大家庭

当金钱站起来说话时&#xff0c;所有的真理都保持了沉默&#xff1b;金钱一旦作响&#xff0c;坏话随之戛然而止。 Hashcode的作用 java的集合有两类&#xff0c;一类是List&#xff0c;还有一类是Set 前者有序可重复&#xff0c;后者无序不重复。当我们在set中插入的时候怎…