【Qt Quick】实现多任务滑动界面

效果展示

代码部分

BG.qml

import QtQuick 2.0
import QtQuick.Controls 2.5
/*
*主窗口背景
*/
Item {
    anchors.fill: parent
    Rectangle{
        id:rect_BG
        anchors.fill: parent
        radius: 5
        color: "#b5b5b5b5"
    }


    SwipeView{
        id:swipeView
        anchors.left: parent.left
        anchors.leftMargin: 10
        anchors.right: parent.right
        anchors.rightMargin: 10
        anchors.top: parent.top
        anchors.topMargin: 50
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 30

        spacing: 10

        ServerPanel{id:sp_ROOT}

        ListPanel{id:lp_ROOT}
    }

    PageIndicator{
        id:indicator
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10
        anchors.horizontalCenter: parent.horizontalCenter

        currentIndex: swipeView.currentIndex
        count:swipeView.count
    }


}

ServerPanel.qml

第一个页面

import QtQuick 2.0
import QtQuick.Controls 2.5


Page {
    background: null
    Label{
        anchors.horizontalCenter: parent.hoverEnabled

        Text {
            text: "服务器界面"
            color: "white"
            font.bold: true
            font.pointSize: 14
        }
    }
}

ListPanel.qml

第二个页面

import QtQuick 2.0
import QtQuick.Controls 2.5
Page {
    id:lp_ROOT
    background: null
    Label{
        anchors.horizontalCenter: parent.hoverEnabled
        Text {
            text: "列表界面"
            color: "white"
            font.bold: true
            font.pointSize: 14
        }


    }
}

点击切换

SwipeView是通过更改currentIndex来实现切换页面的，所以只需要将你的SwipeView内的id声明出来然后修改currentIndex即可。

    Button{
        id:btn_Front
        text: "上一个"
        anchors.centerIn: parent
        onClicked: {
            bg_ROOT.swipeView.currentIndex -= 1
        }
    }

注意
1.Page是自带背景色的，默认为白色，如果想取消背景，使用background: null；