Bonus question: Would you happen to know how to re-implement this in C++? I tried my best but I don't think my best is good enough haha: #pragma once #include <QQuickItem> #include <qproperty.h> // Item that tracks when its window-local position is changed at any point class PositionTrackingItem : public QQuickItem { Q_OBJECT QML_ELEMENT Q_PROPERTY(QPointF globalPosition READ getGlobalPosition NOTIFY globalPositionChanged BINDABLE bindableGlobalPosition) public: PositionTrackingItem(QQuickItem* parent = nullptr); inline QPointF getGlobalPosition() const { return globalPosition; } QBindable<QPointF> bindableGlobalPosition() { return &globalPosition; } signals: void globalPositionChanged(); private: Q_OBJECT_BINDABLE_PROPERTY(PositionTrackingItem, QPointF, globalPosition, &PositionTrackingItem::globalPositionChanged) }; #include "PositionTrackingItem.h" #include <qproperty.h> // https://forum.qt.io/post/833294 PositionTrackingItem::PositionTrackingItem(QQuickItem* parent) : QQuickItem(parent) { globalPosition.setBinding([&]() { QPointF pos = QPointF(property("x").toFloat(), property("y").toFloat()); for (QQuickItem* item = property("parent").value<QQuickItem*>(); item != nullptr; item = item->property("parent").value<QQuickItem*>()) pos += QPointF(item->property("x").toFloat(), item->property("y").toFloat()); return pos; }); }

Apparently I was running 6.9.3. Code works in 6.10. Thank you!

The most natural way in QML is a model-view approach. If that at all fits your use case it is usually the cleanest way to go. The UI does not need to be a list (view) as such in order to be driven by a list model. You could use a Repeater-based approach for example. You said you struggled to get the bindings to a list model to work properly. This is almost certainly because of something fairly simple that you are doing wrong, so I would advise persevering with that to find out what the problem is. Reduce it down to a simple case and post it here if you are still struggling.

This did it - thank you so much, I've been trying to figure this out forever.

@SuhasKrishanamurthy, thanks for your help, but the GridView component has fixed cell's width and height. Items' height can grow up, but if it will be greater than cell's size, the collision occures. If I adjusted GridView's cell size depending on size of largest item, there were too much free space between small items. The following code lays items out with collision: GridView { id: gridView width: 600 height: 400 cellWidth: 200 cellHeight: 100 flow: GridView.FlowTopToBottom model: ListModel { ListElement { value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit" } ListElement { value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." } ListElement { value: "Lorem ipsum dolor sit amet" } ListElement { value: "Lorem ipsum dolor sit amet" } ListElement { value: "Lorem ipsum dolor sit amet" } ListElement { value: "Lorem ipsum dolor sit amet" } ListElement { value: "Lorem ipsum dolor sit amet" } ListElement { value: "Lorem ipsum dolor sit amet" } ListElement { value: "Lorem ipsum dolor sit amet" } ListElement { value: "Lorem ipsum dolor sit amet" } ListElement { value: "Lorem ipsum dolor sit amet" } ListElement { value: "Lorem ipsum dolor sit amet" } ListElement { value: "Lorem ipsum dolor sit amet" } ListElement { value: "Lorem ipsum dolor sit amet" } ListElement { value: "Lorem ipsum dolor sit amet" } ListElement { value: "Lorem ipsum dolor sit amet" } } // orientation: Qt.Horizontal // GridView doesn't have this property boundsBehavior: Flickable.StopAtBounds clip: true delegate: Item { width: gridView.cellWidth height: contentItem.implicitHeight required property string value Rectangle { id: contentItem width: parent.width color: "lightgray" implicitHeight: tex.implicitHeight + 20 Text { id: tex text: value wrapMode: Text.WordWrap anchors.margins: 10 anchors.fill: parent } } } } [image: 5511da81-8d79-4306-a3e0-805fb1a8683a.png] The desired behavior is lay items out onto the first column until it has free space and then turn into the next column (see picture in the question). Unfortunately, GridView lays item out strictly as a grid. This is partially implemented with Flow + Repeater layout: [image: 0887646e-c6a2-4106-b30c-ff9f8b07a38f.png]

Thanks, but: @Rangantha-B-V said in Custom TextField existing required property not initialized, but it is: implicitWidth exists on Item and is read-only (computed internally based on content/layout hints). I disagree. The doc does not write that the property is read-only. It says that "however some items have an inherent implicit size which cannot be overridden, for example, Image and Text", which I assume is the case of the TextInput, but is not really mentioned precisely in the doc... As a counter-example to read-only, you can set an implicitWidth with a ComboBox and with a TextField. The ComboBox can have a required on implicitWidth without any problems, which is not the case of TextField, why that ? @Rangantha-B-V said in Custom TextField existing required property not initialized, but it is: bind to width or implicitWidth internally So it's read-only from the outside but editable within the object ? In this case, why could I set it from the outside by simply removing the required line ?

@Redman cool 😎

@Asperamanca I tried to change the whole text to lowercase and that worked!

It may well be something to do with the latest offering of QT, many changes have been made since 5.15. I looks like you have solved your problem, what was it?

@costasjames479 I am aware that other styles are available for Qt Quick Controls. However, according to the documentation, the Basic Style is the most performant and platform-compatible, which is why I prefer to use it. With this in mind, how can I figure out what to place as the attribute or property name instead of ? in the following code: TextField { palette { ?: "blue" ?: "white" } } ComboBox { palette { ?: "blue" ?: "white" } } In other words, is there a detailed list in the documentation that specifies the name of each attribute, which I might have overlooked?

Don't use anchors for the dot, use a fixed value, something like Image { id: dot width: someWidth height: someHeight x: someXPositionRelativeToXBodyImage y: someYPositionRelativeToYBodyImage ..... }

@johngod This is a great reference. I will check the code and compare what I am doing wrrong here. Thank you so much.

Same issue, I have also got this cmake warning: -- qmlplugindump failed for org.kde.quickcharts. -- Could NOT find org.kde.quickcharts-QMLModule (missing: org.kde.quickcharts-QMLModule_FOUND) The qml plugin 'QuickChartsplugin' is a dependency of 'project', but the link target it defines (KF6::QuickChartsplugin) does not exist in the current scope. The plugin will not be linked.