时间戳

首页 > 解决方案 > 如何创建双向 SwipeView？

qt - 如何创建双向 SwipeView？

问题描述

在 QML 如何创建圆形 SwipeView？意味着如果我在最后一个元素，他们下一个项目应该是第一个。

SwipeView { id：视图间距：20 currentIndex：0 剪辑：true anchors.fill：parent }

或者我可以使用可以包含不同物品的不倒翁吗？

我正在使用此代码

    PathView {
    id: view
    anchors.fill: parent
    snapMode:PathView.NoSnap
    property int widthAllList: (widthItemNotSelect*3)+60
    property int widthItemNotSelect: parent.width-13
    anchors.horizontalCenter: parent.horizontalCenter
    preferredHighlightBegin: 0.5
    preferredHighlightEnd: 0.5
    model: ["qrc:/QML/Widget/AnalogClock.qml",
        "qrc:/QML/Widget/Clock.qml"
        ,"qrc:/QML/Widget/Widget.qml"]
    delegate: Loader {
        width: parent.width
        height: parent.height
        source: modelData
    }
    path: Path {
        id:myPath
        startX: 0
        startY: parent.height/2
        PathLine { x:view.widthAllList; y:parent.height/2 }
    }
 }

标签： qtqml

解决方案

使用PathView的简单示例：

PathView {
    id: view
    anchors.fill: parent
    snapMode: PathView.SnapToItem
    model: ["Test1.qml","Test2.qml","Test3.qml"]
    delegate: Loader {
        width: parent.width
        height: parent.height
        source: modelData           
    }
    path: Path {
        startX: view.width/2; startY: view.height/2
        PathQuad { x: view.width/2; y: -view.height*view.model.length; controlX: -view.width; controlY: view.height/2 }
        PathQuad { x: view.width/2; y: view.height/2; controlX: view.width * view.model.length; controlY: view.height/2 }
    }
}

上面示例中的路径仅供参考，您可以根据需要进行修改。

项目示例 - Test1.qml：

import QtQuick 2.9

Rectangle{
    color: "green"
    width: parent.width
    height: parent.height
    Text {
        anchors.centerIn: parent
        text: "page " + index
    }
}

Tumbler我猜可以使用相同的技巧来完成。

推荐阅读