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

Answer 1

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