ListView with List Items arranged on Half Circle using QML

Question

I'm Trying to make a Circular ListView with List Items arranged on Half Circle. it should look something like this:

I'm using Qt open source license and i cannot find a controller similar in QtControls. Please any idea or suggestion ? Thanks in advance

This seems like a customized menu widget. You may have to create one yourself. — kiner_shah, Jul 29 '22 at 07:18
Depending on your requirements, you might be able to accomplish that just with a normal vertical ListView by including an indent field in your data model. That way each instance of the delegate knows how far to indent itself. — JarMan, Jul 29 '22 at 15:39
Does this answer your question? [QT QML Circle and a text listview](https://stackoverflow.com/questions/59216431/qt-qml-circle-and-a-text-listview) — folibis, Jul 30 '22 at 07:32
All thanks for your help i will try the proposal of @JarMan and comeback to you i will update the ticket again — Wim, Aug 01 '22 at 13:52

score 1 · Accepted Answer · answered Oct 19 '22 at 10:53

Here is a solution based on the link that folibis shared in the comments above using PathView to layout the items of a model along a 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
            }
        }
    }
}

ListView with List Items arranged on Half Circle using QML

1 Answers1