QML SwipeView

• SwipeView

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.5
import QtQuick.Controls 1.4 as Ctr1
import QtQuick.Layouts 1.2
import './Text.js' as Jie

Window{
    id:window
    width:640
    height:480
    visible: true
   title:"Hello world"

   Item{
        id:jieItem
       anchors.fill:parent
       //颜色随机生成器
       property  var colorBuilder:Jie.getColorFactory(Qt.rgba)
       TabBar{
           id:title
           anchors.left: parent.left
           anchors.right: parent.right
           currentIndex: view.currentIndex

           Repeater{
               model:['Home','Help','Ablout']
               TabButton{
                   text:modelData
                   onClicked: view.currentIndex = index
               }
           }
       }

       SwipeView{
           id:view
           currentIndex: 1
           anchors.top: title.bottom
           anchors.bottom:parent.bottom
           anchors.left :parent.left
           anchors.right:parent.right
//           Text{
//               text:'firstPage'
//           }
//           Text {

//               text:'secondPage'
//           }
//           Text{
//               text:'thirdPage'
//           }
           Repeater{
               model:3
               Rectangle{
                   color: jieItem.colorBuilder()
               }
           }
       }
       PageIndicator{
           id:indicator
           count:view.count
           currentIndex:view.currentIndex

           anchors.bottom: view.bottom
           anchors.horizontalCenter: parent.horizontalCenter
       }
   }

}

• 封装版本

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.5
import QtQuick.Controls 1.4 as Ctr1
import QtQuick.Layouts 1.2
import './Text.js' as Jie

Window{
    id:window
    width:640
    height:480
    visible: true
   title:"Hello world"

   Item{
        id:jieItem
       anchors.fill:parent
       //颜色随机生成器
       property  var colorBuilder:Jie.getColorFactory(Qt.rgba)
       property  var pages:['Home','Help','Ablout','jie']
       TabBar{
           id:title
           anchors.left: parent.left
           anchors.right: parent.right
           currentIndex: view.currentIndex

           Repeater{
               model:jieItem.pages
               TabButton{
                   text:modelData
                   onClicked: view.currentIndex = index
               }
           }
       }

       SwipeView{
           id:view
           currentIndex: 1
           anchors.top: title.bottom
           anchors.bottom:parent.bottom
           anchors.left :parent.left
           anchors.right:parent.right
//           Text{
//               text:'firstPage'
//           }
//           Text {

//               text:'secondPage'
//           }
//           Text{
//               text:'thirdPage'
//           }
           Repeater{
               model:jieItem.pages.length
               Rectangle{
                   color: jieItem.colorBuilder()
               }
           }
       }
       PageIndicator{
           id:indicator
           count:view.count
           currentIndex:view.currentIndex

           anchors.bottom: view.bottom
           anchors.horizontalCenter: parent.horizontalCenter
       }
   }

}