QMl 組件（一）

QML 自定義插件之輪播

效果如下

組件代碼如下所示

import QtQuick 2.12
import QtQuick.Controls 2.5

Rectangle {
    width: parent.width
    height: parent.height
    SwipeView {
          id: view
          currentIndex: 0
          anchors.fill: parent
          Page{
              Image{
                  anchors.fill: parent
                  source: "qrc:/image/logo2.jpg"
              }
          }
          Page{
              Image{
                  anchors.fill: parent
                  source: "qrc:/image/logo4.jpg"
              }
          }
          Page{
              Image{
                  anchors.fill: parent
                  source: "qrc:/image/logo6.jpg"
              }
          }
          Item {
              Image{
                  anchors.fill: parent
                  source: "qrc:/image/logo8.jpg"
              }
          }
          Item {
              id: secondPage
              Rectangle{
                  anchors.centerIn: parent
                  width: 200
                  height: 200
                  color: "black"
              }
          }
      }

    //數字顯示（與原點顯示二選一）
    Rectangle{
     width: 60
     height: 20
     radius: height / 2
     color: "#858585"
     anchors.bottom: view.bottom
     anchors.right: parent.right
     Text {
         id: _numIndicatorText
         anchors.centerIn: parent
         font.family: fontFamily
         font.pixelSize: 14
         color: "#FFFFFF"
         text: qsTr((view.currentIndex + 1) +  "/" + view.count)
     }
    }
    //原點顯示
    PageIndicator {
        id: indicator
        interactive: true
        count: view.count
        currentIndex: view.currentIndex
        anchors.bottom: view.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        delegate: Rectangle {
            implicitWidth: 8
            implicitHeight: implicitWidth
            radius: width / 2
            color: index === indicator.currentIndex ? "red" : "#858585"
            opacity: index === indicator.currentIndex ? 1 : pressed ? 0.7 : 0.3
            anchors.verticalCenter: parent.verticalCenter
            Behavior on opacity {
                OpacityAnimator {
                    duration: 1000
                }
            }
        }
    }

      Timer {
          interval: 1500; running: true; repeat: true
          onTriggered: {
              if(view.currentIndex < view.count - 1) view.currentIndex++;
                                      else view.currentIndex = 0;
          }
      }
}