CODEWITHSUNDEEP
qtlistviewqml
yuvi
yuvi

Reputation: 25

QT QML Circle and a text listview

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.

Parent Layout Child Layout (when specific Character is pressed)

Upvotes: 0

Views: 1248

Answers (1)

folibis
folibis

Reputation: 12864

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

                }
            }
        }
    }
}

Upvotes: 1

Related Questions