QML作为一种脚本化语言，可以很方便的实现各种图形特效，同时又能友好的和Qt中的C++代码进行交互。随之QML的日趋成熟，使用QML进行项目开发，成为一种选择
本文介绍两种方式实现支持Button直接跳转切换和页面滑动切换效果
使用SwipeView控件实现，重写contentItem属性：
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQml.Models 2.3
import QtQuick.Controls.Material 2.0
ApplicationWindow {
visible: true
width: 800
height: 600
title: qsTr("Hello World")
Material.theme: Material.Light
Material.accent: Material.DeepOrange
Material.primary: Material.Blue
ColumnLayout{
anchors.fill: parent
Rectangle{
Layout.fillWidth:true
height: 30
Button{
id:indicator
anchors.fill: parent
checkable: true
onClicked: {
if(checked==true){
area.visible=true
}
else{
area.visible=false
}
}
}
}
Rectangle{
id:area
visible:indicator.checked?true:false
Layout.fillWidth:true
height: 160
Label{
text:"Area .........."
}
}
SwipeView {
id: swipeView
Layout.fillWidth:true
Layout.fillHeight: true
currentIndex: tabBar.currentIndex
contentItem: ListView {
model: swipeView.contentModel
interactive: swipeView.interactive
currentIndex: swipeView.currentIndex
spacing: swipeView.spacing
orientation: swipeView.orientation
snapMode: ListView.SnapOneItem
boundsBehavior: Flickable.StopAtBounds
highlightRangeMode: ListView.StrictlyEnforceRange
preferredHighlightBegin: 0
preferredHighlightEnd: 0
highlightMoveDuration: 1
maximumFlickVelocity: 4 * (control.orientation === Qt.Horizontal ? width : height)
}
Page1{
}
Light{
}
PageTimer{
}
}
}
footer: TabBar {
id: tabBar
currentIndex: swipeView.currentIndex
TabButton {
text: qsTr("First")
}
TabButton {
text: qsTr("Second")
}
TabButton {
text: qsTr("Third")
}
}
}
currentIndex表示访问索引，contentItem表示可视区域对象模型，通过改写ListView的highlightMoveDuration属性值，实现跳转的效果
使用ListView控件实现方式:
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQml.Models 2.3
import QtQuick.Controls.Material 2.0
ApplicationWindow {
visible: true
width: 800
height: 600
title: qsTr("Hello World")
Material.theme: Material.Light
Material.accent: Material.DeepOrange
Material.primary: Material.Blue
ColumnLayout{
anchors.fill: parent
Rectangle{
Layout.fillWidth:true
height: 30
Button{
id:indicator
anchors.fill: parent
checkable: true
onClicked: {
if(checked==true){
area.visible=true
}
else{
area.visible=false
}
}
}
}
Rectangle{
id:area
visible:indicator.checked?true:false
Layout.fillWidth:true
height: 160
Label{
text:"Area .........."
}
}
ListView {
id: swipeView
//anchors.fill: parent
Layout.fillWidth:true
Layout.fillHeight: true
currentIndex: tabBar.currentIndex
contentItem: ListView {
model: swipeView.contentModel
interactive: swipeView.interactive
currentIndex: swipeView.currentIndex
spacing: swipeView.spacing
orientation: swipeView.orientation
snapMode: ListView.SnapOneItem
boundsBehavior: Flickable.StopAtBounds
highlightRangeMode: ListView.StrictlyEnforceRange
preferredHighlightBegin: 0
preferredHighlightEnd: 0
highlightMoveDuration: 1
maximumFlickVelocity: 4 * (control.orientation === Qt.Horizontal ? width : height)
}
model:pages
delegate: delegatePages
highlightMoveDuration: 1
//flickDeceleration: 5
highlightMoveVelocity:1000
orientation: ListView.Horizontal
highlightRangeMode:ListView.StrictlyEnforceRange
snapMode: ListView.SnapOneItem
boundsBehavior: Flickable.StopAtBounds
}
ListModel{
id:pages
ListElement{
// @disable-check M16
pageSource:"Page1.qml"
}
ListElement{
// @disable-check M16
pageSource:"Light.qml"
}
ListElement{
// @disable-check M16
pageSource:"PageTimer.qml"
}
}
Component{
id:delegatePages
Loader{
width:ListView.view.width
height:ListView.view.height
source: pageSource
}
}
}
footer: TabBar {
id: tabBar
currentIndex: swipeView.currentIndex
TabButton {
text: qsTr("First")
}
TabButton {
text: qsTr("Second")
}
TabButton {
text: qsTr("Third")
}
}
}
效果如下
————————————————
版权声明：本文为CSDN博主「我本无意争芳华」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/JieZuoWangDao/article/details/80366039