ListView with List Items arranged on Half Circle using QML - c++

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