Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Set scale property based on different screen resolutions(Solved)
Forum Updated to NodeBB v4.3 + New Features

Set scale property based on different screen resolutions(Solved)

Scheduled Pinned Locked Moved QML and Qt Quick
6 Posts 2 Posters 3.2k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • ? Offline
    ? Offline
    A Former User
    wrote on last edited by
    #1

    Hi,
    how can i set scale property for all items in a QML application based on different devices having different resolutions.

    1 Reply Last reply
    0
    • O Offline
      O Offline
      onek24
      wrote on last edited by
      #2

      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.

      1 Reply Last reply
      0
      • ? Offline
        ? Offline
        A Former User
        wrote on last edited by
        #3

        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?

        1 Reply Last reply
        0
        • O Offline
          O Offline
          onek24
          wrote on last edited by
          #4

          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.

          1 Reply Last reply
          0
          • ? Offline
            ? Offline
            A Former User
            wrote on last edited by
            #5

            Thank you very much. Everything is solved.

            1 Reply Last reply
            0
            • O Offline
              O Offline
              onek24
              wrote on last edited by
              #6

              You're welcome, please add [Solved] to the topic. Thank you.

              1 Reply Last reply
              0

              • Login

              • Login or register to search.
              • First post
                Last post
              0
              • Categories
              • Recent
              • Tags
              • Popular
              • Users
              • Groups
              • Search
              • Get Qt Extensions
              • Unsolved