qt - 减少 Qml 路径 View 成员之间的距离

Question

我一直在尝试使用 QML 的 Pathview 元素来实现滚动类的东西。下图显示了进度 我希望缩短日历和消息传递元素之间的距离。请帮忙。

下面是我的滚动代码。

import QtQuick 2.0

Rectangle {

//        property real rotationOrigin: PathView.origin
    id: scroll
    width: 800; height: 480
    color: "white"
//    property real rotationAngle
    ListModel {
        id: appModel
        ListElement { name: "Music"; icon: "pics/AudioPlayer_48.png" }
        ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" }
        ListElement { name: "Camera"; icon: "pics/Camera_48.png" }
        ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" }
        ListElement { name: "Messaging"; icon: "pics/EMail_48.png" }
        /*ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" }
        ListElement { name: "Contacts"; icon: "pics/AddressBook_48.png" }*/
    }

    Component {

        id: appDelegate
        Item {
            id: item
            width: 240; height: 80
            scale: PathView.iconScale
            property real  rotationAngle: PathView.angle
            transform: Rotation {
                id: rotation
                origin.x: item.width/2
                origin.y: item.height/2
                axis.x: 1; axis.y:0 ; axis.z: 0
                angle: rotationAngle
            }

            Image {
                id: myIcon
                y: 20; anchors.verticalCenter: parent.verticalCenter
                source: icon
                smooth: true
            }
            Text {
                anchors {
                    leftMargin: 10
                    left: myIcon.right; verticalCenter: parent.verticalCenter }
                text: name
                font.pointSize: 25
                smooth: true
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    view.currentIndex = index
                    console.log("onClicked" + index);
                }

            }
        }
    }

    Component {
        id: appHighlight
        Rectangle { width: 240; height: 80; color: "lightsteelblue" }
    }

    PathView {
        Keys.onRightPressed: if (!moving) { incrementCurrentIndex(); console.log(moving) }
        Keys.onLeftPressed: if (!moving) decrementCurrentIndex()
        id: view
        anchors.fill: parent
        highlight: appHighlight
        preferredHighlightBegin: 0.5
        preferredHighlightEnd: 0.5
        focus: true
        model: appModel
        delegate: appDelegate
        path: Path {
            startX: scroll.width/2
            startY: 0
            PathAttribute { name: "z"; value: 0 }
            PathAttribute { name: "angle"; value: 75 }
            PathAttribute { name: "iconScale"; value: 0.85 }
            PathLine { x: scroll.width / 2; y: scroll.height / 4;  }
            PathAttribute { name: "z"; value: 50 }
            PathAttribute { name: "angle"; value: 70 }
            PathAttribute { name: "iconScale"; value: 0.85 }
            PathLine { x: scroll.width /2; y: scroll.height/2; }
            PathAttribute { name: "z"; value: 100 }
            PathAttribute { name: "angle"; value: 0 }
            PathAttribute { name: "iconScale"; value: 1.0 }
            PathLine { x: scroll.width /2; y: 3*(scroll.height/4); }
            PathAttribute { name: "z"; value: 50 }
            PathAttribute { name: "angle"; value: -70 }
            PathAttribute { name: "iconScale"; value: 0.85 }
            PathLine { x: scroll.width /2; y: scroll.height; }
            PathAttribute { name: "z"; value: 0 }
            PathAttribute { name: "angle"; value: -75 }
            PathAttribute { name: "iconScale"; value: 0.85 }
        }
    }
}

Answer 1

您尝试过 PathPercent 吗？看看这里:

http://qmlbook.github.io/en/ch06/index.html#the-pathview