QML and Qt Quick

@jsulm Thank you for your information

The fix is in graphics driver. Please refer below link for more information on the graphics driver https://e2e.ti.com/support/processors-group/processors/f/processors-forum/1060753/am4378-flickering-issue-on-qt-with-eglfs-instance

@cuongkjm You could simply make a Row and use the AnimatedImage in the center: Row { spacing: 5 Text{ id: text anchors.verticalCenter: parent.verticalCenter text: "Qt Project is very useful" } AnimatedImage { anchors.verticalCenter: parent.verticalCenter height: text.height * 2.5 fillMode: Image.PreserveAspectFit source: "https://doc.qt.io/qt-5/images/pathview.gif" } Text{ anchors.verticalCenter: parent.verticalCenter text: "I like it very much" } }

Making the width and height of ChartView the same size as the project window (640x480) allows the text to display in full. Assuming you're not restricted on the size of your ChartView of course. [image: 0f6ba03a-3069-498a-9dbb-80d552b4aa9e.PNG]

For dynamic objects look into Repeater and views with delegates. For non-item based objects look into Instantiator. A lot of the views are more efficient if all of the Items you create are not visible at the same time. The advantage of these is they can all work from a model object from either QAbstractListModel (and other abstract models) or ListModel. I use Repeater to show items on a map.

Thanks for the support.

@Kofr I am stuck into a similar problem, Can you by any chance provide the working code where the TreeView(with parent-child relation) is editable too? Considering that this post was really long back, but it will be a huge help if the code (completed with the qml and C++ too) is provided! Thanks in advance!

@qcoderpro said in Simple ListModel example: What have I forgotten to set that nothing is shown here, please? Hi, you are missing a view and delegate to display the model data. Have a look at https://doc.qt.io/qt-5/qtquick-modelviewsdata-modelview.html I also quickly added a simple ListView with Rectangle delegate to your example: import QtQuick Window { width: 640 height: 480 visible: true title: qsTr("Hello World") ListModel { id: personModel ListElement { name: "Bill Smith" number: "555 3264" } ListElement { name: "John Brown" number: "555 8426" } ListElement { name: "Sam Wise" number: "555 0473" } } ListView { anchors.fill: parent model: personModel delegate: Rectangle { width: 200 height: 20 color: index % 2 ? "lightblue": "white" Text { id: nameText text: name + ": " + number anchors.fill: parent } } } } Regards, Ulrich

Hi, let me propose more sophisticated way to achieve this. Create a ring object dynamically to the desired position and run animation on opacity and size inside that component. Once the animation is completed, destroy the object. The lifetime of the ring object is then handled automatically and more declarative way. Here's example code: import QtQuick 2.15 import QtQuick.Window 2.15 Window { id: root width: 640 height: 480 visible: true title: qsTr("Hello World") MouseArea { anchors.fill: parent onClicked: ringComponent.createObject(root, {originX: mouse.x, originY: mouse.y}) } Component { id: ringComponent Rectangle { id: ring property int originX: 0 property int originY: 0 color: "transparent" border.color: "red" border.width: 5 x: originX - width/2 y: originY - height/2 height: width radius: width / 2 NumberAnimation on width { from: 0 to: 100 duration: 500 running: true } OpacityAnimator on opacity { from: 1 to: 0 duration: 500 onStopped: ring.destroy() } } } } Regards, Ulrich

Do you read the doc? https://doc.qt.io/qt-6/qml-qtquick-listview.html#currentIndex-prop

I would imagine, it would be more cost effective (cpu and gpu time) if the Win Wheel was a PNG or JPG, especially when it comes to animation (spinning/slowing/stopping/etc). But how to build that using QtQML, good question!. For instance, you could use the image you have given, this may well mean using something like Photoshop/GIMP/etc to get things looking how you want. With regard to the animation; once you have your component image (the spinwheel), you can look at animation, here might be a good place to get started; https://qmlbook.github.io/ch01-meetqt/meetqt.html#digesting-a-user-interface Using the very image you've provided, I put this together. It's a demo, not a complete app, but perhaps a good starting point? Built using SailfishSDK on Sony Xperia 10 II Dual SIM. Screenshot directly from device. Column { id: column spacing: 20 width: parent.width anchors.centerIn: parent Label { text: "\u25BC" font.pixelSize: 144 anchors.horizontalCenter: parent.horizontalCenter } Image { id: wheel source: "../images/win-wheel.png" anchors.horizontalCenter: parent.horizontalCenter PropertyAnimation on rotation { id: spinAnimation from: 0 to: 3610 duration: 10000 running: false easing.type: Easing.InOutQuint } MouseArea { anchors.fill: parent onClicked: { spinAnimation.running = true timer.start() label.opacity = 0.0 console.log(spinAnimation.duration) } } } Label { id: hint text: "Tap wheel to start" anchors.horizontalCenter: parent.horizontalCenter } Rectangle { width: wheel.width/2 radius: 20 height: 200 color: "white" border { width: 4 color: "green" } anchors.horizontalCenter: parent.horizontalCenter Label { id: label //visible: false opacity: 0.0 text: "WIN!" color: "black" font { bold: true pixelSize: 108 } anchors.centerIn: parent } Timer { id: timer interval: spinAnimation.duration running: false repeat: true onTriggered: { label.opacity = 1.0 } } } } [image: 687a606d-0970-47b9-866e-958c72acfd87.png]

A quick update : this https://bugreports.qt.io/browse/QTBUG-94524 (Introduce a QT_ADDITIONAL_HOST_PACKAGES_PREFIX_PATH variable) will solve the issue above.