使用 QML 将列表项排列在半圆上的 ListView答案

【问题标题】：ListView with List Items arranged on Half Circle using QML使用 QML 将列表项排列在半圆上的 ListView
【发布时间】：2022-10-19 18:53:51
【问题描述】：

我正在尝试制作一个圆形 ListView，其中列表项排列在半圆上。它应该看起来像这样：

我正在使用 Qt 开源许可证，但在 QtControls 中找不到类似的控制器。请问有什么想法或建议吗？提前致谢

【问题讨论】：

这似乎是一个定制的菜单小部件。您可能必须自己创建一个。
根据您的要求，您可以通过在数据模型中包含缩进字段来使用普通的垂直 ListView 来完成此操作。这样，委托的每个实例都知道自己缩进多远。
这回答了你的问题了吗？ QT QML Circle and a text listview
感谢您的帮助，我将尝试@JarMan 的建议并回到您身边，我将再次更新票证
@folibis 不，这不能帮助我

标签： c++ qml qt5 qtquickcontrols2 qtquick-designer

【解决方案1】：

这是一个基于 folibis 在上述 cmets 中共享的链接的解决方案，使用 PathView 沿 PathArc 布局模型的项目。

import QtQuick
import QtQuick.Window
import QtQuick.Shapes

Window {
    visible: true
    width: 400
    height: 400

    Shape {
        ShapePath {
            strokeWidth: 2
            strokeColor: "black"
            fillColor: "lightgrey"
            startX: 0
            startY: 0

            PathArc {
                x: 0
                y: 400
                radiusX: 400
                radiusY: 400
            }
        }
    }

    Shape {
        x: 100

        ShapePath {
            strokeWidth: 2
            strokeColor: "grey"
            startX: 0
            startY: 0

            PathArc {
                x: 0
                y: 400
                radiusX: 400
                radiusY: 400
            }
        }
    }

    PathView {
        x: 100
        model: ["Apple", "Banana", "Cherry", "Dragonfruit", "Grapefruit", "Orange", "Papaya"]
        delegate: Item {
            width: 50
            height: 50

            Rectangle {
                height: 50
                width: 260
                radius: 25
                color: "lightgrey"
            }

            Rectangle {
                id: circle
                width: 50
                height: 50
                radius: 25
                color: "darkgrey"
            }

            Text {
                anchors.leftMargin: 10
                anchors.left: circle.right
                anchors.verticalCenter: parent.verticalCenter
                text: modelData
                font.pixelSize: 24
            }
        }

        path: Path {
            // Those 2 coordinates are a bit of hack to push down the first item on the actual arc
            // so it won't stick out the top. There might be a better way of doing that
            startX: 18
            startY: 35

            PathArc {
                x: 0
                y: 400
                radiusX: 400
                radiusY: 400
            }
        }
    }
}

【讨论】：