QT QML Circle and a text listview

Question

I wanted to create an UI similar to below images. I understand Qt Pathview helps me to move the items in an circular fashion. But I couldn't get how to create the background similar to the images with equal space between the text. I tried with rectangle (radius:360) to draw circle, but the pathview items doesn't move along the center of the rectangle-circle.

your explanation is not clear. please show what you mean in the pictures. — Soheil Armin
Please clarify your question. As @SoheilArmin already said please provide the clear image what you want to get, some sketch or whatever. Please provide Minimal, Reproducible Example of your attempt to do that and what you get as a result. — folibis

folibis folibis · Accepted Answer · 2019-12-07T14:12:10

Maybe this simple example could help you with PathView:

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 400
    height: 400

    Item {
        id: container
        width: 300
        height: 300
        anchors.centerIn: parent
        Rectangle {
            anchors.fill: parent
            radius: width /2
            color: "orange"
            Rectangle {
                x: 50
                y: 50
                width: 200
                height: 200
                radius: 100
                color: "white"
            }
        }

        PathView {
            anchors.fill: parent
            model: 10
            delegate: Rectangle {
                width: 50
                height: 50
                radius: 25
                color: "green"
            }
            path: Path {
                startX: 150; startY: 25

                PathArc {
                    x: 150; y: 275
                    radiusX: 125; radiusY: 125
                    direction: PathArc.Clockwise

                }
                PathArc {
                    x: 150; y: 25
                    radiusX: 125; radiusY: 125
                    direction: PathArc.Clockwise

                }
            }
        }
    }
}

QT QML Circle and a text listview

1 Answers