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")
        }
    }
}

效果如下