Using QML / Qt Creator to create layouts that stretch & shrink with window size? Is percentage size possible?
-
Hi guys,
I've had a bit of a hunt online however I am yet to find any good examples of how to do this. I would like my UI to resize as I set it. So it could resize everything, or it could resize just some aspects so things like menu's and buttons are static in size but graphics, graphs etc resize fully. I have begun the process using anchors to anchor items like menus inside a containing item to the side and the header bar to the top and expanding width wide with the screen, however it's more complex internal componants that are proving more tricky to figure out the best approach.
My theory is: I make all items inside the object inherit off the parent item, which inherits off the main window size. However, is there any way to use percentages? So if I have an interface with two graphs and a box with input values, can make the values box fixed then the graphs take up something like 60% for one and 40% for the other of the remaining space? In my hunting online I have yet to find an example of sizing in QML or Qt Creator using percentages.
Appreciate any comments whether you know how to do this or are looking to do the same thing. Happy to share any methods I come up with.
Thank you.
-
Yep, just use property binding and you are good to go. Multiplying by 1 is 100%, multiplying by 0.5 is 50%, multiplying by 0.12 is 12% and so on. It's first grade math :P
-
Hi,
New query. I have now sucessfully made items which stretch and shrink with the window size (thank you for help there). My next step is to put those componants together on a page.
I have a piece of code for each block to position it:
anchors.top: nameofblockabove.bottom
anchors.topMargin: 10In the theory it will put each block one below the other with a space of 10...
Spot the deliberate mistake?
It is still targeting the top of the nameofblockabove when I run it.
-
Is the "blockabove" the actual component, or is a container component of some kind which might happen to have a height of 0?
Edit to add: Incidentally, in the future, be sure to start a new thread for new questions that aren't directly related to the previous thread items.
-
I've got multiple things grouped inside items and am using those top level items to layout the content on the overall page. So the term block should have been parent item.
If I set an item to anchor its left hand side to another items right hand side I can put them side by side, I assumed I could do the same to put things one above another. However they seem to e anchoring to the top rather than the bottom of the item above. I would like each item one above the other regardless of the size of the screen and each individual item now resizes width and height ok, just getting them to sit in relation to each other now.
Sorry for multi-thread, was unsure as it's part of the same overall question about expanding and contracting layouts.
Thanks for help. I'm a front end web coder by nature so sometimes it's just that I think about these things differently as my background is from a different style of coding.
-
Make sure that the container items are actually the size you think they are. Items don't expand to the size of their contents. If you're not setting a height: property then this is probably what's happening.
If the height of the container is really zero, then its neighbor is really anchoring to the bottom, but it looks like the top. (A very quick and dirty way to check is to set "clip: true" on the container item, which will effectively hide anything which is outside the bounds of that item.)
-
Thanks, I will try that tomorrow morning - it's odd because the items inside are set to match the parent width and height - those are set as a percentage of the overall size of the screen so if the parent item is 0 the internal one ought to also display as such. I will try clip and see if perhaps I need to check how I set those, the way I am doing it works like a cascade so perhaps the issue lies with my first item.
Thanks again!
