效果展示
代码部分
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
;