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

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

带有居中当前项的简单PathView

1 个答案: