QML学习-swipeView 滑动切换窗口

swipview 滑动的视图

首先，主QML： 

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQml.Models 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.3

Window {
    visible: true
    width: 1000
    height: 1000
    title: qsTr("Hello World")

    SwipeView{
        id:sw1
        x:0
        y:0

        width: parent.width
        height: 600
        Rectangle{
            width: sw1.width
            height: sw1.height
            color: "red"

        }
        Rectangle{
            width: sw1.width
            height: sw1.height
            color: "blue"

        }
        Rectangle{
            width: sw1.width
            height: sw1.height
            color: "green"

        }

    }

    Mybutton{
        x:0
        y:600
        width: 200
        height: 100
        text:"DD"
        onClicked: {
            sw1.currentIndex = 0;
        }
    }

    Mybutton{
        x:250
        y:600
        width: 200
        height: 100
        text:"FF"
        onClicked: {
            sw1.currentIndex = 1;
        }
    }
}

功能是两个按钮，按动按钮来切换两个纯色页面。滑动切换，动画效果比较丝滑。

button的QML： 

import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
Button{
style:ButtonStyle{
    id:bs1
    background: Rectangle{
        implicitWidth: 100
        implicitHeight: 100
        color: "blue"
    }

    Label{
        color:"yellow"
        font.bold: true
        text:control.text
    }

}
}

使用了buttonStyle，为什么要单独使用一个文件呢？因为buttonstyle是controls.style 1.4的，而swipeview是2.0的，版本不匹配。只能单独启一个文件。