版权声明：本文为博主原创文章，未经博主允许不得转载。 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")
// }
// }
}
来源：https://www.cnblogs.com/wxmwanggood/p/10912544.html