具有居中当前项的简单 PathView

Question

我刚刚开始使用 QML 进行编程，我需要用一些图像制作一个简单的 Carousel。我发现最简单的方法是使用 PathView。据我所知，我试图将我当前的项目放在视图的中心，但失败了。这是我完成的代码。

Rectangle {
    id: rectangle
    height: 200
    color: "#00000000"
    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
    Layout.fillWidth: true

    PathView {
        id: carouselView
        anchors.fill: parent
        model: listModel

        delegate: Image {
            width: PathView.isCurrentItem ? 256 : 128
            height: PathView.isCurrentItem ? 256 : 128
            source: iconSource
        }
        path: Path {
            startX: 0
            PathLine {
                x: 800
                y: 0
            }
        }
        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
    }
}

ListModel {
    id: listModel
    ListElement {
        iconSource: "qrc:///images/chair.svg"
    }
    ListElement {
        iconSource: "qrc:///images/chair.svg"
    }
    ListElement {
        iconSource: "qrc:///images/chair.svg"
    }
    ListElement {
        iconSource: "qrc:///images/chair.svg"
    }
}

想要的效果是一个简单的水平轮播，当前项目居中。 当前使用的版本：5.6

Answer 1

这是一个使用 PathView 的简单轮播示例：

import QtQuick 2.9
import QtQuick.Controls 2.2

ApplicationWindow {
    visible: true
    width: 640
    height: 640
    Component {
        id: delegate
        Item {
            width: 200; height: 200
            scale: PathView.iconScale
            opacity: PathView.iconOpacity
            z: PathView.iconOrder
            Image { anchors.fill: parent; source: modelData }
        }
    }

    PathView {
        id: view
        anchors.fill: parent
        anchors.bottomMargin: 150
        anchors.topMargin: 50
        pathItemCount: 7
        preferredHighlightBegin: 0.5                         //
        preferredHighlightEnd: 0.5                           // That should center the current item
        highlightRangeMode: PathView.StrictlyEnforceRange    //
        model:
            [
            "http://placeimg.com/200/200/any?rand=" + Math.random(),
            "http://placeimg.com/200/200/any?rand=" + Math.random(),
            "http://placeimg.com/200/200/any?rand=" + Math.random(),
            "http://placeimg.com/200/200/any?rand=" + Math.random(),
            "http://placeimg.com/200/200/any?rand=" + Math.random(),
            "http://placeimg.com/200/200/any?rand=" + Math.random(),
            "http://placeimg.com/200/200/any?rand=" + Math.random(),
            "http://placeimg.com/200/200/any?rand=" + Math.random(),
            ]
        delegate: delegate
        path: Path {
            startX: 0; startY: view.height/2
            PathAttribute { name: "iconScale"; value: 0.2 }
            PathAttribute { name: "iconOpacity"; value: 10.2 }
            PathAttribute { name: "iconOrder"; value: 0 }
            PathLine {x: view.width / 2; y: view.height/2 }
            PathAttribute { name: "iconScale"; value: 1.2 }
            PathAttribute { name: "iconOpacity"; value: 1 }
            PathAttribute { name: "iconOrder"; value: 8 }
            PathLine {x: view.width; y: view.height/2 }
        }
    }
}

当然，如果您真的想将当前项目放在视图的中心，您只需更改路径，即将起点移动到中心等。