Anchor Layout - Video

Any user interface is built by positioning controls on the screen. While we can easily change the x/y coordinates of a given item, this approach doesn't quite scale when building an entire interface. This is where layout managers enter the game: elements (and properties) that automatically manage the position and the sizing of other elements.

This video introduces the simplest and yet most commonly used layouting system available in Qt Quick: anchor layouts. Anchors allow us to "glue" a side (left/right/top/bottom) of an element to a side of another element. This makes it super easy to place two elements side by side, or left/right-align an element inside its parent. The center and fill anchor layouts are also discussed here.

Some of the other layouting solutions available in Qt Quick are:
Positioners (Row, Column, etc.): https://doc.qt.io/archives/qt-5.15/qtquick-positioning-layouts.html

Qt Quick Layouts: https://doc.qt.io/archives/qt-5.15/qtquicklayouts-index.html

Placing elements manually by changing their x/y/width/height coordinates: https://doc.qt.io/archives/qt-5.15/qtquick-visualcanvas-coordinates.html

The example code showcased in this video is available here: https://github.com/KDAB/kdabtv