Qt5.7.0的QML实现SwipeView

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/MyLovelyJay/article/details/80928302

SvpEvew提供了一个基于Slash的导航模型。
基本实现代码如下：

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0


ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    SwipeView {
        id: swipeView
        anchors.fill: parent
        currentIndex: tabBar.currentIndex

        Page1{
            Label {
                text: qsTr("page one")
                anchors.centerIn: parent
                font.pixelSize: 30
                font.italic: true
                color:"yellow"
            }
        }
        Page2 {
            Label {
                text: qsTr("page two")
                anchors.centerIn: parent
                font.pixelSize: 30
                font.italic: true
                color:"yellow"
            }
        }
        Page3 {
            Label {
                text: qsTr("page three")
                anchors.centerIn: parent
                font.pixelSize: 30
                font.italic: true
                color:"yellow"
            }
        } 
        Page4 {
            Label {
                text: qsTr("page four")
                anchors.centerIn: parent
                font.pixelSize: 30
                font.italic: true
                color:"yellow"
            }

        }
    }

    header: TabBar {
                id: headertabBar;
                currentIndex:swipeView.currentIndex
                TabButton {

                    text: qsTr("header one");
                }
                TabButton {
                    text: qsTr("header two")
                }
                TabButton {
                    text: qsTr("header three")
                }
                TabButton {
                    text: qsTr("header four")
                }
            }


    footer: TabBar {
        id: tabBar
        currentIndex: swipeView.currentIndex
        TabButton {
            text: qsTr(" footer one")
        }
        TabButton{
            text: qsTr("footer two")
        }
        TabButton {
            text: qsTr("footer three")
        }
        TabButton {
            text: qsTr("footer Four")
        }
    }

实现效果：

为了更好的视觉效果，添加如下代码可实现逗点动态移动效果：

    PageIndicator {
        id: indicator

        count: swipeView.count
        currentIndex: swipeView.currentIndex

        anchors.bottom: swipeView.bottom
        anchors.horizontalCenter: parent.horizontalCenter
    }

效果如下：

这样就多了紫色圈中的逗点