Set scale property based on different screen resolutions(Solved)
-
Hi,
how can i set scale property for all items in a QML application based on different devices having different resolutions.
-
Hey,
just set the scale property of your top-level component, it will automatically scale its children.
If you want to set your Width and Height based on different Resoultions, i would go ahead and have a main-resolution, design your ui based on this resolution and calculate an multiplier for width and height:
@property double widthMultiplier: width/baseWidth
property double heightMultiplier: height/baseHeight@
BaseHeight and BaseWidth are the default width, which you used for designing your ui. Now we can go ahead and multiply the x, y, width, height of our Components:
@MouseArea { // just a component
width: 200 * widthMultiplier
height: 331* heightMultiplier
x: 22 * widthMultiplier
y: 90 * heightMultiplier
...
}@We can even go further and keep the proportions with a little big more math. We would only need to use the smallest of these values.
@MouseArea { // just a component
width: 200 * widthMultiplier < heightMultiplier ? widthMultiplier : heightMultiplier
height: 331* heightMultiplier < widthMultiplier = heightMultiplier : widthMultiplier
x: 22 * widthMultiplier < heightMultiplier ? widthMultiplier : heightMultiplier
y: 90 * heightMultiplier < widthMultiplier = heightMultiplier : widthMultiplier
...
}@We could also implement this math in our property directly.
-
Thank you very much. That solved my problem.
One more question, can we set the font size like this.I am using QML gridlayout to show all items and it does the resizing property very well. But i think when it works on different devices, the scaling is not working well. Am i right?
-
bq. Thank you very much. That solved my problem.
You're welcome, i'm glad that i could help you.
bq. One more question, can we set the font size like this.
Font Size dependent on the Resolution: Well, basically yes, you can even use the same multipliers:
@Text {
text: "Some text"
font.pixelSize: 12*heightMultiplier
}@
Now the text scales with the height, you can also use the widthMultiplier for that. You can calculate your own multiplier for the text, if you want to.bq. I am using QML gridlayout to show all items and it does the resizing property very well. But i think when it works on different devices, the scaling is not working well. Am i right?
Try to resize your window/top-level component. That way you'll see how it scales. It won't scale differently on other devices due to the fact that you rescale the resolution that way and the multiplier is calculated based on the current and default/base resolution.
-
Thank you very much. Everything is solved.
-
You're welcome, please add [Solved] to the topic. Thank you.
