QML编程:页面导航效果的实现

      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