Qt qml实现动态轮播图效果
更新时间：2024年12月30日 10:39:26 作者：小灰灰搞电子
这篇文章主要为大家详细介绍了Qt和qml实现动态轮播图效果的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下
一、效果展示
二、源码分享
DynamicCarousel.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Shapes
Item {
id:self
signal clearError(string numberStr)
PathView{
id:pathView
anchors.fill: parent
focus: true
clip: true
model:listModel
delegate:listDelegate
path: listPath
preferredHighlightBegin: 0.5
preferredHighlightEnd: 0.5
pathItemCount: 3
MouseArea{
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onEntered: {
timerCircle.stop()
}
onExited: {
timerCircle.start()
}
}
}
ListModel{
id:listModel
ListElement{number:"000";note:"伺服电机故障";solution:"请联系管理员"}
ListElement{number:"111";note:"卡件";solution:"清除线体后重新启动"}
ListElement{number:"222";note:"等待处理";solution:"请联系管理员"}
ListElement{number:"333";note:"等待处理";solution:"请联系管理员"}
ListElement{number:"444";note:"等待处理";solution:"请联系管理员"}
ListElement{number:"555";note:"等待处理";solution:"请联系管理员"}
}
Component{
id:listDelegate
Rectangle{
width: pathView.width
height: pathView.height*1.2
color: "#f013227a"
radius: 15
border.width: 2
z:PathView.z?PathView.z:0
scale: PathView.scale?PathView.scale:1.0
required property string number
required property string note
required property string solution
RowLayout{
anchors.fill: parent
anchors.margins: 5
ColumnLayout{
Layout.fillWidth: true
Layout.fillHeight: true
Text {
id: textErrorNumber
Layout.fillWidth: true
Layout.fillHeight: true
text: number
font.pointSize: 16
verticalAlignment: Qt.AlignVCenter
horizontalAlignment: Qt.AlignHCenter
color: "#ffffffff"
}
Text {
Layout.fillWidth: true
Layout.fillHeight: true
id: textErrorNote
text: note
font.pointSize: 12
verticalAlignment: Qt.AlignVCenter
horizontalAlignment: Qt.AlignHCenter
color: "#ffffffff"
}
Text {
Layout.fillWidth: true
Layout.fillHeight: true
id: textErrorSolution
text: solution
font.pointSize: 12
verticalAlignment: Qt.AlignVCenter
horizontalAlignment: Qt.AlignHCenter
color: "#ffffffff"
}
}
Button{
id:btnClearError
Layout.preferredWidth: parent.width/5
Layout.preferredHeight: parent.width/5
hoverEnabled: false
scale: down?0.8:1.0
background: Rectangle{
radius: 10
border.width: 0
color: "#00000000"
Image {
anchors.fill: parent
source:"qrc:/image/resources/images/qml/clearError.svg"
}
}
onClicked: {
clearError(textErrorNumber.text)
listModel.remove(pathView.currentIndex)
}
}
}
}
}
Path{
id:listPath
startX: 0
startY:pathView.height/2
PathAttribute{name:"z";value:0}
PathAttribute{name:"scale";value:0.5}
PathLine{
x:pathView.width/2
y:pathView.height/2
}
PathAttribute{name:"z";value:2}
PathAttribute{name:"scale";value:0.8}
PathLine{
x:pathView.width
y:pathView.height/2
}
PathAttribute{name:"z";value:0}
PathAttribute{name:"scale";value:0.5}
}
Timer{
id:timerCircle
running: true
repeat: true
interval: 3000
onTriggered: {
pathView.incrementCurrentIndex()
}
}
//ListElement{number:"1121";note:"等待处理";solution:"请联系管理员"}
function addError(numberStr,noteStr,solutionStr){
var data = {number: numberStr,note:noteStr,solution:solutionStr};
listModel.append(data)
}
}
三、使用方法
DynamicCarousel{
anchors.fill: parent
anchors.margins: 5
anchors.horizontalCenter: parent.horizontalCenter
}
四、实现原理
通过PathView实现，通过路径和缩放来实现动态效果。
到此这篇关于Qt qml实现动态轮播图效果的文章就介绍到这了,更多相关Qt qml动态轮播图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
算法在编写成可执行程序后，运行时需要耗费时间资源和空间(内存)资源 。因此衡量一个算法的好坏，一般是从时间和空间两个维度来衡量的，即时间复杂度和空间复杂度，感兴趣的同学可以参考阅读2023-04-04
相信大家都玩过扫雷游戏，因为它太经典了，今天我们用C语言来模拟实现扫雷游戏，结合示例代码给大家介绍的非常详细，感兴趣的朋友一起看看吧2022-04-04
QT中涉及到数据库相关的项目，几乎都需要将少量的信息数据导出到文件保存好，然后用户可以打开该表格进行编辑，编辑完成后保存，再重新导入到软件中。所以本文将具体为大家介绍一下这一功能如何实现，感兴趣的可以跟随小编一起试一试2022-01-01
我们每天打开浏览器浏览网页时，浏览器的进程怎么与web服务器通信的？QQ进程怎么与服务器或你好友所在的QQ进程通信？这些都得靠socket？那什么是socket？socket的类型有哪些？还有socket的基本函数，下面小编带大家了解下2019-05-05
在面向对象编程中,类成员变量过多可能会造成干扰,可以采用函数式编程的思想,通过闭包和lambda表达式减少不必要的类成员,增强代码的可控性和减少干扰,注意要正确使用mutable修饰符和值捕获,以及合理安排lambda的初始化时机,感兴趣的朋友跟随小编一起看看吧2024-09-09
C 语言提供了丰富的操作符，有：算术操作符，移位操作符，位操作符，逻辑操作符，逗号表达式。让我们通读本篇来详细了解吧2021-11-11
在 C++ 编程中,获取系统时间是一项常见任务,无论是记录日志、计算程序运行时间,还是实现计时功能,都需要获取当前的系统时间,本文将介绍几种在 C++ 中获取系统时间的方法,并提供相应的代码示例,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了C/C++指针、函数、结构体、共用体的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-01-01
有时候需要类的一些成员与类本身相关联，而不是与类的每个对象相关联。比如类的所有对象都要共享的变量，这个时候我们就要用到类的静态成员，今天通过实例代码给大家详细介绍，需要的朋友参考下吧2021-07-07
这篇文章主要介绍了C++ COM编程之接口背后的虚函数表,COM的背后,就是接口,而接口的背后，就是虚函数表,需要的朋友可以参考下2014-10-10
最新评论