UbuntuUserInterfaceToolkit.ubuntu-layouts

QML has the following basic layout primitives:


Unfortunately in a design that needs to work in many different form factors these aren't very flexible on their own as:

  1. not designed to alter size of children - so no form of stretching supported by default.
  2. as a result no way to have contents fill the container (without calculating the width/height of the children manually).

As a result, most applications need to do calculations to size the children correctly in these primitives to fill the whole container.

Qt offers advice to developers on multi-layouts in QML. In summary they recommend: Application top level page definitions, and reusable component definitions, should use one QML layout definition for the layout structure. This single definition should include the layout design for separate Device Orientations and container Aspect Ratios.

UIs layouts should be constructed to share as many components as possible. Then on display mode change these shared components can be reparented, reducing number of components to unload/reload and also helping to save state.

Using a Loader to switch the QML for different display modes is slower, and will involve loss of state. Instead the above advice is to use AnchorChanges & PropertyChanges to specify all layouts in one QML document, so switching display mode is dynamic - but admittedly is a painful for all display modes and states that an application may want to support.

http://doc.qt.io/qt-5/qtquicklayouts-overview.html">QtQuick Controls introduces the http://doc.qt.io/qt-5/qtquicklayouts-overview.html">ColumnLayout, http://doc.qt.io/qt-5/qtquicklayouts-overview.html">RowLayout and http://doc.qt.io/qt-5/qtquicklayouts-overview.html">GridLayout components as well as the http://doc.qt.io/qt-5/qtquicklayouts-overview.html">Layout attached properties, which brings additional layouting possibilities to Qt Quick.

In addition to these, UI toolkit had introduced the Ubuntu.Layouts module to help developers define different layouts for different orientations and form factors, all being possible to be done within the same code base.

This tutorial gives an introduction to layout factoring abilities offered by Ubuntu UI toolkit. It tries to cover few possible layout scenarios, however will not cover advanced scenarios application developers may need.

Tutorial chapters:

  1. Terminology
  2. The first conditional layout
  3. Changing the order
  4. Lay out a single item differently from others
  5. Hiding elements, showing more
  6. Overlay items in an item host
  7. Defining more layouts for different form factors

So, let's take them step-by-step...

  • Layouts - Terminology