我可以在 QML 中控制委托到 PathView 的附加点吗？

debugcn 发表于 Dev

尼古拉·普罗科申科

我试图PathView在 QtQuick 中围绕s 。我可以毫不费力地创建一个PathView合适的委托，以便这些委托“沿着路径”呈现。但是，我找不到“沿着”意味着什么的任何定义，即代表如何附加到路径上。考虑以下示例，其中路径穿过页面的垂直中心：

import QtQuick 2.8
import QtQuick.Controls 2.1

ApplicationWindow {

    visible: true
    id: app
    width: 1280
    height: 720
    color: "#330000"

    PathView {
        id: pathView
        anchors.fill: parent
        model: 6

        delegate: Rectangle {
            id: item
            height: app.height * 0.5
            width: app.width * 0.25

            border.width: 5
            border.color: "#2f2f2f"
            color: "#d2d2d2"

            scale: PathView.itemscale
            z: PathView.z
        }

        interactive: true

        pathItemCount: 5
        preferredHighlightEnd: 0.5
        preferredHighlightBegin: 0.5

        path: Path {        
            startX: 0
            startY: app.height * 0.5

            PathAttribute { name: "z"; value: 0 }
            PathAttribute { name: "itemscale"; value: 0.5 }

            PathLine {
                x: app.width * 0.5
                y: app.height * 0.5
            }

            PathAttribute { name: "z"; value: 100 }
            PathAttribute { name: "itemscale"; value: 1 }

            PathLine {
                x: app.width
                y: app.height * 0.5
            }

            PathAttribute { name: "z"; value: 0 }
            PathAttribute { name: "itemscale"; value: 0.5 }
        }
    }
}

此代码生成此渲染：

路径上的项目显然是依附在它们的垂直中心上的，没有明确说明是否也涉及到水平中心。

现在我想将项目放在路径的顶部，即矩形应该底部对齐，它们的底部边框位于屏幕的中心。换句话说，我想通过底部锚点而不是中心来连接它们。

Qt 文档在那里没有太大帮助。我可以在没有恶意黑客攻击的情况下完成此操作吗？如果可以，我该怎么做？

埃利亚内斯克

您的情况下的问题是由比例引起的，如果我们评论该行，我们会得到以下信息：

并且观察到它是对齐的。Scale 使用一个名为的参考点，transformOrigin默认Item.Center情况下它是项目的，在您的情况下它应该是Item.Bottom。

进行以下更改：

delegate: Rectangle {
    id: item
    height: app.height * 0.5
    width: app.width * 0.25
    y:0

    border.width: 5
    border.color: "#2f2f2f"
    color: "#d2d2d2"

    scale: PathView.itemscale
    transformOrigin: Item.Bottom // +++
    z: PathView.z
}

得到：