Update blogpost.md
Compare changes
+ 6
− 3
@@ -4,11 +4,11 @@
Qt has (almost) been here since the dawn of graphical user interfaces, being released just 5 years after Windows 3.0. Needless to say, technologies, expectations and duties for an UI toolkit evolved substantially over the years. Organizing and layouting of visual elements like buttons is one of those duties that changed significantly: From small screens with few pixels and fixed size embedded apps we came a long way to high resolution screens and handheld devices of all form factors. The changes in design philosophy are even more dramatic. Applications need to look and feel good on many devices as well as in different configurations, landscape and portrait, windowed and full screen. More than that, they need to be able to switch seamlessly between those modes.
The longevity of Qt is a remarkable and would not to have been possible without constantly reviewing and updating existing APIs. This is an exercise we conducted recently with the layouting system. The layouting system of Qt stayed basically the same over a long time, only slightly extended by QtQuick, its [anchoring concept](https://doc.qt.io/qt-6/qtquick-positioning-anchors.html) and some adaptions for [high-dpi devices](https://doc.qt.io/qt-6/highdpi.html). We wanted to know if this system still conforms to the demands of modern UIs and workflows. This is also a good opportunity to look at other technologies and frameworks, in particular HTML and CSS, Material/Flutter and Microsofts Fluent to see what they do different or even better. We are curious about any concepts that cannot be implemented in QML and eager to fill these gaps. In order to identify any gaps in our API and to find the best practice with Qt layouts, we implemented many examples from those frameworks in QML. In the following we present some of the outcomes to give you an update on how we think of layouts and where the future could lead to. We hope to inspire some of you and collect feedback on the current system, our thoughts and ideas for the future. If you are passionate about Qts layout system, this is the opportunity to raise your voice and let us hear your opinion!
The longevity of Qt is remarkable and would not have been possible without constantly reviewing and updating existing APIs. This is an exercise we conducted recently with the layouting system. The layouting system of Qt stayed basically the same over a long time, only slightly extended by QtQuick, its [anchoring concept](https://doc.qt.io/qt-6/qtquick-positioning-anchors.html) and some adaptions for [high-dpi devices](https://doc.qt.io/qt-6/highdpi.html). We wanted to know if this system still conforms to the demands of modern UIs and workflows. This is also a good opportunity to look at other technologies and frameworks, in particular HTML and CSS, Material/Flutter and Microsofts Fluent to see what they do different or even better. We are curious about any concepts that cannot be implemented in QML and eager to fill these gaps. In order to identify any gaps in our API and to find the best practice with Qt layouts, we implemented many examples from those frameworks in QML. In the following we present some of the outcomes to give you an update on how we think of layouts and where the future could lead to. We hope to inspire some of you and collect feedback on the current system, our thoughts and ideas for the future. If you are passionate about Qts layout system, this is the opportunity to raise your voice and let us hear your opinion!
Responsive layouts played a big role in web design, at least with the raise of smart phones, so this technology can provide a good source of inspiration. HTML and CSS have a clear separation of content (HTML) and appearance (CSS stylesheets). This gives great flexibility, since you can easily change the layout (in CSS) in order to adapt to different screen sizes, while not having to alter the HTML content hierarchy. How this plays out in practice can be seen in the [responsive web design tutorial of w3school](https://www.w3schools.com/css/css_rwd_mediaqueries.asp). The [example](https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_mobilefirst) is straight forward: HTML tags are used to create a hierarchy of different elements. The visual representation of these elements, including their size and positioning, is described in the CSS stylesheet, depending on the device and in particular its width. The w3school example stays simple and sets the width of the elements to one third of the total width to put three vertical blocks beside each other or sets the width of all elements to 100% of the total width, such that they appear beneath each other. The first layout makes great use of large devices in landscape format, the latter works well on small devices or in portrait mode.
Responsive layouts played a big role in web design, at least with the raise of smart phones, so this technology can provide a good source of inspiration. HTML and CSS have a clear separation of content (HTML) and appearance (CSS stylesheets). This gives great flexibility, since you can easily change the layout (in CSS) in order to adapt to different screen sizes, while not having to alter the HTML content hierarchy. How this plays out in practice can be seen in the [responsive web design tutorial of w3school](https://www.w3schools.com/css/css_rwd_mediaqueries.asp). The [example](https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_mobilefirst) is straight forward: HTML tags are used to create a hierarchy of different elements. The visual representation of these elements, including their size and positioning, is described in the CSS stylesheet, depending on the device and in particular its width. The w3school example uses a 12-column layout with three vertical areas: The left area covers three columns, the middle area covers 6 columns, and the right area covers the remaining three columns. When the screen is below 768 pixels, it will make all three areas 100% wide, such that they appear beneath each other. The first layout makes great use of large devices in landscape format, the latter works well on small devices or in portrait mode.
How do the Qt layouts compare to this? The first thing we must consider is the separation of content and layout. There is no dedicated language for styling like CSS in Qt, but we have our one-for-all scripting language QML, that we can use for the content as well as for the layout. We can also, to some extent, declare them in separate places. First, we define our contents and the hierarchy with declarative QML. On top of our hierarchy there is a GridLayout with three columns. The header and the bottom items span the complete width of the window and therefore occupy three columns. Between the header and bottom there are three columns of items. This matches the description of the content from the responsive w3school example.
@@ -88,7 +88,10 @@ In an effort to make the responsive layouts possible with even the simplest code
The full example code can be accessed [here](https://git.qt.io/matthias.rauter/blogposts/-/blob/main/layouts/examples/chania2.qml) but requires [a patch for Qt6.5](https://codereview.qt-project.org/c/qt/qtdeclarative/+/467014) to run. We also provide an example to play around with various item sizes and alignment flags:
We think this addition increases the flexibility of responsive layouts substantially. It allows to change the number columns and rows quickly without worrying or even thinking about filling up all lines. A nice side effect is, that we can make smart decisions at runtime when expanding items to fulfill the align-justify rule and increase the size of the item with the largest preferred size. Unfortunately, this addition has to live deep in the existing layout class and you will require [a patch](https://codereview.qt-project.org/c/qt/qtdeclarative/+/467014) and recompiling Qt to test it.