handling Complex QtQuick Layout
-
I am designing an application screen which has lot of controls and I need to have the same layout structure in my QML application. I have tried with QGridLayout and individual QRow/QColumnLayouts but no luck.
Can anyone help me to solve this. Any idea how efficiently the layout can be used in Qt Quick applications?
The above screen I created using Qt Creator but it uses a lot of hard coded values for position and size and the layout is not aligned properly when resizing.
-
Hi,
It depends on desired behaviour.
Do you want your controls to grow up or only the view (center black rectangle) when maximising the window ?
I use 'Anchors' for the positioning http://doc.qt.io/qt-5/qtquick-positioning-anchors.html
LA
-
I am designing an application screen which has lot of controls and I need to have the same layout structure in my QML application. I have tried with QGridLayout and individual QRow/QColumnLayouts but no luck.
Can anyone help me to solve this. Any idea how efficiently the layout can be used in Qt Quick applications?
The above screen I created using Qt Creator but it uses a lot of hard coded values for position and size and the layout is not aligned properly when resizing.
@Mammamia As @LeLev said "It depends on desired behaviour." Most probably layouts would help you but it's difficult to say anything actually helpful without knowing how it should behave when resizing and what it connected to what. One way to get help is to write a main.qml which has the components shown in your picture, using the three different layouts (not QGridLayout etc. but GridLayout etc. in QML) as you think they should work. Then describe how it doesn't work as you expect.
-
@LeLev Yes you are correct, I need the center black rectangle to be resized when resizing the window.
All other components will be having same size even we resize it.
I have tried using GridLayout in QML to position it along with multiple Row/ColumnLayout but at some point of time the behaviour changes and the space between the left top buttons increases when resizing..
I have made it simple in a drawing how it should be aligned with simple rectangles. Which looks like,
Which option will be better to use either Positioning Anchors with Row,Column or to use Row/ Coulmn/ Grid Layouts??
-
@LeLev Yes you are correct, I need the center black rectangle to be resized when resizing the window.
All other components will be having same size even we resize it.
I have tried using GridLayout in QML to position it along with multiple Row/ColumnLayout but at some point of time the behaviour changes and the space between the left top buttons increases when resizing..
I have made it simple in a drawing how it should be aligned with simple rectangles. Which looks like,
Which option will be better to use either Positioning Anchors with Row,Column or to use Row/ Coulmn/ Grid Layouts??
@Mammamia said in handling Complex QtQuick Layout:
I have tried using GridLayout in QML to position it along with multiple Row/ColumnLayout but at some point of time the behaviour changes and the space between the left top buttons increases when resizing..
I have made it simple in a drawing how it should be aligned with simple rectangles. Which looks like,
Nice illustration, it's helpful.
The space between the buttons naturally increases because the layout tries to occupy space for each cell evenly. There are basically two ways to fix this kind of situation. Either the layout item itself should not be resized (in this case its height should stay fixed) or one item inside it shoud greedily take all extra space. The latter is often easier: just add an extra empty item below the buttons which fills the space:
Item{Layout.fillHeight: true}If no other item inside that layout doesn't try to fill height this one will and the other items are packed together.
