Have you ever felt that QML “lives its own life”? It seems you changed the width—and suddenly everything “went wrong”: positioning, sizes, visibility, event response. Every developer knows how annoying this feeling of uncontrolled magic is.
This chapter reveals why QML elements are actually predictable—and how to turn “magical” interfaces into managed systems. Here you’ll discover the non-obvious power of property bindings, we’ll reveal the logic of parent/id hierarchies, and learn the secret of how professional developers make UI flexible without extra code—faster, cleaner, and more stable.
In one place, 7+ key visual elements are collected (from Item and Rectangle to ListView/PathView), property bindings and reaction via onWidthChanged/onHeightChanged are shown, as well as 3 practices that save hours: property, alias, and dynamic creation via Repeater + Flickable.
Don’t delay: if QML is used in the project, skipping this chapter almost guarantees extra workarounds in the next chapters on layout, input, and models.
This chapter includes ready-to-use code examples.
Chapter Self-Check
Why do child rectangle sizes automatically change when the window is resized in the property binding example?Answer
Correct answer: Automatic property binding occurs: QML monitors value changes and notifies all elements that reference these properties via parent.width or element id. This creates a reactive system where changes propagate through the dependency chain.
What’s the fundamental difference between visual elements and objects in QML?Answer
Correct answer: Visual elements have a visual representation on screen (Rectangle, Text, Image), while objects have no visual representation and perform auxiliary roles (Timer, Loader, Connections).
What is an alias and why use it when creating custom elements?Answer
Correct answer: An alias allows publishing properties of nested elements under a different name at a higher level of hierarchy. This makes internal properties accessible for modification from outside, for example:
property alias text: txt.text.Why doesn’t the width property of a top-level element need an alias, but the text property of a nested Text element does?Answer
Correct answer: Top-level element properties are already directly accessible from outside. Aliases are only needed for properties of nested (child) elements to make them accessible at the parent element level.
What requirements are imposed on identifier names (id property)?Answer
Correct answer: Names must start with a lowercase letter or underscore and can contain only letters, numbers, and underscores.
How does the property monitoring mechanism work and what special properties are created?Answer
Correct answer: QML monitors property changes and automatically creates special properties of the form
onX (e.g., onWidthChanged, onHeightChanged) that trigger with each change to the corresponding property.Why use QtObject to declare properties inside an element?Answer
Correct answer: QtObject allows encapsulating data and hiding it from external access, creating private properties. Access to them is only possible via the QtObject identifier inside the element.
What happens if you try to create two elements with the same id in one QML file?Answer
Correct answer: This will cause an error, as identifiers must be unique within a single QML file. QML uses id to create unambiguous references to elements.
When should you use the Repeater element instead of creating elements manually?Answer
Correct answer: Repeater is needed for dynamically creating multiple similar elements based on a data model (number, array, JSON), which makes code compact and readable, avoiding duplication.
How do you properly organize files to create a custom QML module and what should be in the qmldir file?Answer
Correct answer: You need to create a directory with element QML files and add a qmldir file indicating the module name, element names, their versions, and file names. Newer versions are specified above previous ones.
How is the Flickable element similar to the QScrollArea class from Qt and what’s its special feature?Answer
Correct answer: Both are designed to display content whose size exceeds the display area. Flickable’s feature is touch control support with animation and inertia effects during movement.
How do you bind a ProgressBar value with a Dial element for synchronized change?Answer
Correct answer: Assign the Dial element an identifier (e.g., slider), then bind properties:
value: slider.value for ProgressBar. Changes in Dial will automatically reflect in ProgressBar through the binding mechanism.What’s the difference between modal and non-modal dialog windows and how is this set?Answer
Correct answer: A modal window blocks interaction with the main window (
modality: Qt.WindowModal), while non-modal allows working with both windows simultaneously (modality: Qt.NonModal).Practical Exercises
Easy Level
Size Calculator with Synchronization
Create a QML application with three rectangles of different colors. The first rectangle should occupy the entire window. The second—half the width and height of the first. The third—half the dimensions of the second. All sizes should automatically recalculate when the window is resized. Add Text elements showing the current dimensions of each rectangle.
Hints: Use property binding via parent.width and parent.height. Assign each rectangle an id for references. Place Text elements inside rectangles. Use onWidthChanged and onHeightChanged properties for console debugging.
Medium Level
Creating a Custom Button Component
Create a custom CustomButton.qml element that represents a button with rounded corners, a border, and centered text. The element should have its own properties for background color, text color, border size, and corner radius. Add a property alias for button text and a clicked signal. Use a MouseArea element to handle presses. Create a main application with three instances of your button with different appearance settings.
Hints: Base on the Rectangle element. Use property to create customizable properties (e.g., property color buttonColor). Apply property alias to link with internal Text. Add signal clicked() and call it from MouseArea.onClicked. Center the Text element via anchors.centerIn: parent.
Hard Level
Dynamic Gallery with Controls
Create an image gallery application using Repeater and Flickable. The gallery should dynamically generate 10 colored rectangles with numbers. Add a control panel with Slider (to change element size), SpinBox (for number of elements), ComboBox (to select layout type: Grid or Flow). When settings change, the gallery should rebuild. Add ColorDialog for selecting gallery element background color and a Label at the bottom of the window to display current settings.
Hints: Use Flickable as a container for Repeater. Make the Repeater model dynamic via property int itemCount. Bind element size to the Slider value. Use Grid with columns properties or Flow. To switch layout type, use Loader with sourceComponent. Create separate Components for Grid and Flow variants. Use Qt.createComponent() or conditional operator to change component.
💬 Join the Discussion!
Figured out QML elements and the property binding mechanism? Created your first custom component?
Perhaps you have questions about when to use aliases, how to properly organize element hierarchy, or you found an interesting way to apply Repeater?
Share your experience creating custom elements, show implemented projects, or ask questions about modules and ready QtQuick.Controls components!