Question

我有QT 5.5，它不支持SwipeView。我尝试使用listView，但我没有达到我的预期。我想在QT 5.5中使用类似的功能代码，如下面给出的代码，该代码是用QT 5.6编写的。请帮忙

Answer 1

如果您无法更新Qt版本，您确实可以使用ListView，VisualItemModel和default qml property来近似SwipeView。

<强> SwipeView.qml

ListView
{
    id: root

    // Allow to add pages as you would for a QtQuick.Controls 2 SwipeView
    // Each item you declare in your SwipeView will be reparented to itemModel
    default property alias items: itemModel.children

    // SwipeView is horizontal
    orientation: Qt.Horizontal

    // Hide out of bounds pages
    clip: true

    // Do not stop between two pages
    snapMode: ListView.SnapToItem

    // Update currentIndex as you swipe through the pages
    highlightRangeMode: ListView.StrictlyEnforceRange

    model: VisualItemModel {
        id: itemModel
        // Used to bind the pages size to the swipeView size
        onChildrenChanged: {
            for(var i=0;i<children.length; i++)
            {
                children[i].width = Qt.binding(function(){return root.width})
                children[i].height = Qt.binding(function(){return root.height})
            }
        }
    }

}

<强> Page.qml

Item {
    property string title

    Rectangle
    {
        anchors.fill: parent
        border.width: 1
    }

    Text
    {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 20
        text: title
    }
}

<强> PageIndicator.qml

Row
{
    id: root

    property int count
    property int currentIndex
    property Component delegate: bullet
    property bool interactive
    spacing: 5

    Component
    {
        id: bullet
        Rectangle
        {
            height: 10
            width: height
            radius: height/2
            color:"black"
            opacity: currentIndex==index?0.8:0.2
        }
    }

    Repeater
    {
        model: root.count
        Loader
        {
            property int index: model.index
            sourceComponent: delegate
        }
    }
}

<强> main.qml

import QtQuick 2.5
import QtQuick.Controls 1.4

ApplicationWindow
{
    id: window
    visible: true
    width: 300
    height: 300

    SwipeView
    {
        id: swipeView
        anchors.fill: parent
        Page
        {
            title: "Page 1"
        }
        Page
        {
            title: "Page 2"
        }
        Page
        {
            title: "Page 3"
        }
    }

    PageIndicator
    {
        id: pageIndicator
        anchors.bottom: swipeView.bottom
        anchors.bottomMargin: 10
        anchors.horizontalCenter: swipeView.horizontalCenter
        count: swipeView.count
        currentIndex: swipeView.currentIndex
    }
}

Answer 2

Qt Quick Controls 2 was introduced in Qt 5.7：

Qt Quick Controls 2提供了一组控件，可用于在Qt Quick中构建完整的界面。该模块在Qt 5.7中引入。

Qt Labs Controls是在Qt 5.6中引入的，因此您引用的代码必须使用Qt.labs.controls 1.0导入才能与Qt 5.6一起运行。

您需要使用较新的Qt版本（5.6或更高版本）。

如何实现swipeview QtQuick 2.5

2 个答案: