網頁中有很多的左右滑動的圖片輪動的效果。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")
//        }
//    }
}