版權聲明：本文為博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/chyuanrufeng/article/details/82664264
網頁中有很多的左右滑動的圖片輪動的效果。QML實現此效果的兩種方式。
PageIndicator和TabBar 也對應兩種樣式。
其中左右滑動的動畫效果是利用SwipeView的默認切換動畫效果
import QtQuick 2.9 import QtQuick.Controls 2.2 ApplicationWindow { visible= true width= 640 height= 480 title= qsTr("圖片切換") SwipeView { id= swipeView anchors.fill= parent currentIndex= indicator.currentIndex Rectangle{ Image { //id= name source= "./img/0.jpg" anchors.fill= parent } } Rectangle{ Image { //id= name source= "./img/1.jpg" anchors.fill= parent } } Rectangle{ Image { //id= name source= "./img/2.jpg" anchors.fill= parent } } Rectangle{ Image { //id= name source= "./img/3.jpg" anchors.fill= parent } } } //方法1 PageIndicator { id= indicator count= swipeView.count currentIndex= swipeView.currentIndex interactive= true //可以點擊 anchors.bottom= swipeView.bottom anchors.horizontalCenter= parent.horizontalCenter } //方法2 // TabBar { // id= indicator // currentIndex= swipeView.currentIndex // anchors.bottom= parent.bottom // anchors.right= parent.right // width= 400 // opacity = 0.5 // TabButton { // text= qsTr("Page 1") // } // TabButton { // text= qsTr("Page 2") // } // TabButton { // text= qsTr("Page3") // } // TabButton { // text= qsTr("Page 4") // } // } }