Qt qml實現(xiàn)動態(tài)輪播圖效果
更新時間：2024年12月30日 10:39:26 作者：小灰灰搞電子
這篇文章主要為大家詳細介紹了Qt和qml實現(xiàn)動態(tài)輪播圖效果的相關(guān)知識,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考一下
一、效果展示
二、源碼分享
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:"請聯(lián)系管理員"}
ListElement{number:"111";note:"卡件";solution:"清除線體后重新啟動"}
ListElement{number:"222";note:"等待處理";solution:"請聯(lián)系管理員"}
ListElement{number:"333";note:"等待處理";solution:"請聯(lián)系管理員"}
ListElement{number:"444";note:"等待處理";solution:"請聯(lián)系管理員"}
ListElement{number:"555";note:"等待處理";solution:"請聯(lián)系管理員"}
}
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:"請聯(lián)系管理員"}
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
}
四、實現(xiàn)原理
通過PathView實現(xiàn)，通過路徑和縮放來實現(xiàn)動態(tài)效果。
到此這篇關(guān)于Qt qml實現(xiàn)動態(tài)輪播圖效果的文章就介紹到這了,更多相關(guān)Qt qml動態(tài)輪播圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了Qt繪制時鐘效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要為大家詳細介紹了C語言實現(xiàn)魔方比賽管理系統(tǒng)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
二級指針是C語言中指向指針的指針,常用于在函數(shù)中修改指針的地址,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-11-11
QT自定義QTextEdit實現(xiàn)大數(shù)據(jù)的實時刷新顯示功能實例
TextEdit是我們常用的Qt控件,用來顯示文本信息,下面這篇文章主要給大家介紹了關(guān)于QT自定義QTextEdit實現(xiàn)大數(shù)據(jù)的實時刷新顯示功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
掃雷游戲是在一個指定的二維空間里，隨機布置雷，把不是雷的位置都找出來，在你點一個位置的時候它會顯示它周圍全部雷的個數(shù)，根據(jù)這個線索去找 ，會更容易贏。本文將用C語言實現(xiàn)這一經(jīng)典游戲，感興趣的可以嘗試一下2022-11-11
折半查找法也叫做二分查找,顧名思義就是把數(shù)據(jù)分成兩半,再判斷所查找的key在哪一半中,再重復上述步驟知道找到目標key,這篇文章主要給大家介紹了關(guān)于C語言二分查找的相關(guān)資料,需要的朋友可以參考下2023-04-04
C++基于socket多線程實現(xiàn)網(wǎng)絡(luò)聊天室
這篇文章主要為大家詳細介紹了C++基于socket多線程實現(xiàn)網(wǎng)絡(luò)聊天室，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
C語言詳解strcmp函數(shù)的分析及實現(xiàn)
strcmp函數(shù)語法為“int strcmp(char *str1,char *str2)”，其作用是比較字符串str1和str2是否相同，如果相同則返回0，如果不同，前者大于后者則返回1，否則返回-12022-05-05
這篇文章主要介紹了C++變量初始化形式及其默認初始值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要介紹了詳解C++的String類的字符串分割實現(xiàn)的相關(guān)資料,需要的朋友可以參考下2017-07-07