c++qmlqt5qtquickcontrols2qtquick-designer

ListView with List Items arranged on Half Circle using QML


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

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


Solution

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

    enter image description here