QML用PathView實(shí)現(xiàn)輪播圖的代碼詳解

import QtQuick 2.12
import QtQuick.Controls 2.12
 
//輪播圖
Item {
 id: control
 
 property int indicatorWidth: 12
 
 //定時(shí)切換間隔
 property alias timerInterval: path_timer.interval
 //切換動(dòng)畫(huà)執(zhí)行時(shí)間
 property alias pathDuration: path_view.highlightMoveDuration
 property alias delegate: path_view.delegate
 property alias model: path_view.model
 //頁(yè)數(shù)
 property alias count: path_page.count
 
 PathView{
 id: path_view
 anchors.fill: parent
 
 //此屬性保存任何時(shí)候在路徑上可見(jiàn)的項(xiàng)目數(shù)。
 //將pathItemCount設(shè)置為undefined將顯示路徑上的所有項(xiàng)目。
 //因?yàn)閜ath代碼的問(wèn)題，設(shè)置為2最合適
 pathItemCount: 2
 
 //測(cè)試時(shí)，把clip去掉就能看到完整的
 //clip: true
 
 //向前移動(dòng)，即順序0 1 2 3
 movementDirection: PathView.Positive
 
 //切換的時(shí)間
 highlightMoveDuration: 1000
 
 //視圖中突出顯示（當(dāng)前項(xiàng)目）的首選范圍，默認(rèn)值PathView.StrictlyEnforceRange
 //配合preferredHighlight的范圍0.5 0.5，就能顯示在正中，切換更自然
 //highlightRangeMode: PathView.StrictlyEnforceRange
 
 //希望當(dāng)前選定的項(xiàng)位于路徑的中間，則將突出顯示范圍設(shè)置為0.5,0.5
 preferredHighlightBegin: 0.5
 preferredHighlightEnd: 0.5
 path: Path {
  startX: -path_view.width/2
  startY: path_view.height / 2
 
  PathLine {
  x: path_view.pathItemCount * path_view.width-path_view.width / 2
  y: path_view.height / 2
  }
 }
 onModelChanged: {
  if(path_timer.running){
  path_timer.restart();
  }
 }
 
 //測(cè)試用
 //model: ["red","green","blue"]
 //delegate: Rectangle{
 // width: path_view.width
 // height: path_view.height
 // color: modelData
 //}
 }
 //定時(shí)切換
 Timer{
 id: path_timer
 running: control.visible
 repeat: true
 interval: 3000
 onTriggered: {
  //至少兩個(gè)才切換
  if(path_view.count>1)
  path_view.currentIndex=(path_view.currentIndex+1)%path_view.count
 }
 }
 //右下角小圓圈
 PageIndicator {
 id: path_page
 anchors{
  right: parent.right
  bottom: parent.bottom
  margins: 30
 }
 count: path_view.count
 currentIndex: path_view.currentIndex
 spacing: control.indicatorWidth
 delegate: Rectangle{
  width: control.indicatorWidth
  height: width
  radius: width/2
  color: "white"
  //非當(dāng)前頁(yè)就灰色
  opacity: index===path_page.currentIndex?1:0.6
  Behavior on opacity {
  OpacityAnimator{
   duration: 200
  }
  }
  //點(diǎn)擊跳轉(zhuǎn)到該頁(yè)
  //還有問(wèn)題，非連續(xù)的item，他會(huì)快速連續(xù)切換到目標(biāo)index
  //因?yàn)椴皇侵苯忧袚Q，有閃爍的感覺(jué)
  MouseArea{
  anchors.fill: parent
  onClicked: {
   path_view.currentIndex=index;
   if(path_timer.running){
   path_timer.restart();
   }
  }
  }
 }
 }
}

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
 
Window {
 visible: true
 width: 700
 height: 500
 title: qsTr("龔建波 1992")
 
 color: "#021B39"
 
 Column{
 anchors.centerIn: parent
 spacing: 10
 CircleView{
  width: 100
  height: 50
  model:["red","green","blue","orange"]
 
  delegate: Rectangle {
  width: 100
  height: 50
  color: modelData
  //Component.onCompleted: console.log(modelData,"completed")
  }
 
  Rectangle{
  anchors.fill: parent
  color: "transparent"
  border.color: "white"
  }
 }
 CircleView{
  width: 100
  height: 50
  model:["red","green","blue"]
 
  delegate: Rectangle {
  width: 100
  height: 50
  color: modelData
  //Component.onCompleted: console.log(modelData,"completed")
  }
 
  Rectangle{
  anchors.fill: parent
  color: "transparent"
  border.color: "white"
  }
 }
 CircleView{
  width: 100
  height: 50
  model:["red","green"]
 
  delegate: Rectangle {
  width: 100
  height: 50
  color: modelData
  //Component.onCompleted: console.log(modelData,"completed")
  }
 
  Rectangle{
  anchors.fill: parent
  color: "transparent"
  border.color: "white"
  }
 }
 CircleView{
  width: 100
  height: 50
  model:["red"]
 
  delegate: Rectangle {
  width: 100
  height: 50
  color: modelData
  //Component.onCompleted: console.log(modelData,"completed")
  }
 
  Rectangle{
  anchors.fill: parent
  color: "transparent"
  border.color: "white"
  }
 }
 CircleView{
  width: 100
  height: 50
 
  delegate: Rectangle {
  width: 100
  height: 50
  color: modelData
  //Component.onCompleted: console.log(modelData,"completed")
  }
 
  Rectangle{
  anchors.fill: parent
  color: "transparent"
  border.color: "white"
  }
 }
 }
}