PathView delegate use attached attributes
-
- QtVersion:
5.12.5 - I encountered an issue while using PathView. The custom additional attribute of PathAttribute used in the delegate looks normal, but the console will report an error：
qrc:/main.qml:25:17: Unable to assign [undefined] to double qrc:/main.qml:32:21: Unable to assign [undefined] to double- According to the error line, rotation and opacity are abnormal, but the display is normal, And this is my code:
import QtQuick 2.12 import QtQuick.Controls 2.12 ApplicationWindow { width: 1024 height: 600 visible: true Rectangle { width: 280 height: 280 radius: 140 color: "#7097c2" Component { id: dialingDelegate Item { width: 25 height: 5 property var itemScale: PathView.itemScale property var itemOpacity: PathView.itemOpacity property var itemRotation: PathView.itemRotation property bool isCurrentItem: PathView.isCurrentItem rotation: (PathView.itemIsFlip > 0) ? itemRotation : -itemRotation Rectangle { width: parent.width * itemScale height: isCurrentItem ? parent.height * itemScale + 1.5 : parent.height * itemScale anchors.left: parent.left radius: 5 opacity: itemOpacity color: isCurrentItem ? "#fffeff" : "#dee5ee" } MouseArea { anchors.fill: parent onClicked: pathViewDialing.currentIndex = index } } } PathView { id: pathViewDialing model: 14 width: 240 height: width anchors.centerIn: parent // offset: pathView.offset pathItemCount: 7 // interactive: false path: Path { startX: pathViewDialing.width/2 startY: 0 PathAttribute { name: "itemOpacity"; value: 1 } PathAttribute { name: "itemScale"; value: 1.0 } PathAttribute { name: "itemRotation"; value: 0.0 } PathAttribute { name: "itemIsFlip"; value: 0 } PathAngleArc { centerX: pathViewDialing.width/2 centerY: pathViewDialing.height/2 radiusX: pathViewDialing.width/2 radiusY: pathViewDialing.width/2 startAngle: 0 sweepAngle: 30 } PathAttribute { name: "itemOpacity"; value: 0.4 } //不透明度 PathAttribute { name: "itemScale"; value: 0.5 } // 最大缩放 PathAttribute { name: "itemRotation"; value: -30.0 } // 选中项角度 PathAttribute { name: "itemIsFlip"; value: 0 } //是否翻转 PathAngleArc { centerX: pathViewDialing.width/2 centerY: pathViewDialing.height/2 radiusX: pathViewDialing.width/2 radiusY: pathViewDialing.width/2 startAngle: -30 sweepAngle: 30 } PathAttribute { name: "itemOpacity"; value: 1 } //不透明度 PathAttribute { name: "itemScale"; value: 1.0 } PathAttribute { name: "itemRotation"; value: 0.0 } // 最终角度 PathAttribute { name: "itemIsFlip"; value: 1 } //是否翻转 } // 菜单项委托 delegate: dialingDelegate } } }
- QtVersion:
-
I already made an alternative using Repeater and Rectangles, no need for PathView, which I think is too complex for what you appear to be doing. I would say also to update your Qt SDK if you can.
// blue circle Rectangle { id: circle width: 1000 height: width rotation: -18 radius: width/2 color: "#7097c2" anchors.centerIn: parent // repeat tickmarks Repeater { model: 7 Rectangle { id: tickmarks radius: width/2 width: segment.widths[index] height: segment.heights[index] color: index % 7 === 3 ? "#fffeff" : "#dee5ee" property real angle: index * 6 // spacing between tickmarks transform: [ Translate { x: circle.width / 2 - width / 2 y: segment.yPosition[index] }, Rotation { origin.x: circle.width / 2 origin.y: circle.height / 2 angle: tickmarks.angle } ] } } } // tickmarks properties; width, height, position Item { id: segment property var widths: [ 5, 10, 15, 20, 15, 10, 5] property var heights: [25, 40, 60, 80, 60, 40, 25] property var yPosition: [70, 55, 35, 15, 35, 55, 70] }
I think this code is easier to understand and manipulate, but maybe this is because I wrote it!, hope it helps!
-
I tried your code, I cannot reproduce the errors you are getting. I also do not see the 7 rectangles your image shows.
Your code seems overly complex to me. This could be easily achieved using a Rectangle inside a repeater.
-
@Markkyboy Thank you for your reply.
I simplified my code:import QtQuick 2.12 import QtQuick.Controls 2.12 ApplicationWindow { width: 1024 height: 600 visible: true Rectangle { width: 280 height: 280 radius: 140 color: "#7097c2" PathView { id: pathViewDialing model: 14 width: 240 height: width anchors.centerIn: parent pathItemCount: 7 path: Path { startX: pathViewDialing.width/2 startY: 0 PathAttribute { name: "itemRotation"; value: 0.0 } PathLine { x: pathViewDialing.width/2 y: pathViewDialing.width } PathAttribute { name: "itemRotation"; value: -30.0 } } delegate: Rectangle { width: 25 height: 5 rotation: PathView.itemRotation radius: 5 } } } }But we still get the same mistake here
Can you tell me your Qt version? Thank you. -
This time I see the same as you show in your image, but I do not get any errors in console.
I'm using Qt 5.15.14 - on a restricted SDKThe image you show is a very different outcome from your original image. What are you making?, a dialler for phone calls?, a volume control knob?
-
Yes, I's part of the control knob. So do I have any other ways to achieve this effect? Or change Qt version now? :-(
-
I already made an alternative using Repeater and Rectangles, no need for PathView, which I think is too complex for what you appear to be doing. I would say also to update your Qt SDK if you can.
// blue circle Rectangle { id: circle width: 1000 height: width rotation: -18 radius: width/2 color: "#7097c2" anchors.centerIn: parent // repeat tickmarks Repeater { model: 7 Rectangle { id: tickmarks radius: width/2 width: segment.widths[index] height: segment.heights[index] color: index % 7 === 3 ? "#fffeff" : "#dee5ee" property real angle: index * 6 // spacing between tickmarks transform: [ Translate { x: circle.width / 2 - width / 2 y: segment.yPosition[index] }, Rotation { origin.x: circle.width / 2 origin.y: circle.height / 2 angle: tickmarks.angle } ] } } } // tickmarks properties; width, height, position Item { id: segment property var widths: [ 5, 10, 15, 20, 15, 10, 5] property var heights: [25, 40, 60, 80, 60, 40, 25] property var yPosition: [70, 55, 35, 15, 35, 55, 70] }I think this code is easier to understand and manipulate, but maybe this is because I wrote it!, hope it helps!
-
@Markkyboy U are great!
-
F Fan__ has marked this topic as solved 9 days ago
-
Happy to help. I've been playing with gauges, clocks, dials, etc for some time. Laying out text in a circular fashion or as a shape can easily be created using Repeater, handy for speedometers, clocks, you name it. Then you can do stuff with the index of Repeater, endless possibilities.
Also, you may find this GitHub helpful; I've gleaned so much information from here; https://github.com/arunpkio/CircularSlider
-
@Fan__ said in PathView delegate use attached attributes:
QtVersion: 5.12.5
QtVersion: 5.12.5 is too old. Upgrade Qt above 5.15 or 6.8.