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. Component appearance problem in QML apps
Forum Updated to NodeBB v4.3 + New Features

Component appearance problem in QML apps

Scheduled Pinned Locked Moved Solved QML and Qt Quick
7 Posts 5 Posters 652 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.
  • Q Offline
    Q Offline
    qcoderpro
    wrote on 28 Jul 2019, 15:06 last edited by qcoderpro
    #1

    Hello,

    An important concept for apps is density independence. Which means, no matter how big the device is physically, and no matter what the display resolution is, any item should have the same physical size on every device. A button on a small phone should have the same size on a bigger phone or tablet. Same for the height of list items for example.

    So what is the method you QML programmers use to give size to components so that they look the same, smaller on smaller screens and bigger on bigger screens?

    O 1 Reply Last reply 28 Jul 2019, 15:11
    0
    • Q qcoderpro
      28 Jul 2019, 15:06

      Hello,

      An important concept for apps is density independence. Which means, no matter how big the device is physically, and no matter what the display resolution is, any item should have the same physical size on every device. A button on a small phone should have the same size on a bigger phone or tablet. Same for the height of list items for example.

      So what is the method you QML programmers use to give size to components so that they look the same, smaller on smaller screens and bigger on bigger screens?

      O Offline
      O Offline
      ODБOï
      wrote on 28 Jul 2019, 15:11 last edited by
      #2

      @qcoderpro hi
      https://doc.qt.io/qt-5/scalability.html

      Q 1 Reply Last reply 29 Jul 2019, 15:03
      2
      • O ODБOï
        28 Jul 2019, 15:11

        @qcoderpro hi
        https://doc.qt.io/qt-5/scalability.html

        Q Offline
        Q Offline
        qcoderpro
        wrote on 29 Jul 2019, 15:03 last edited by qcoderpro
        #3

        @lelev

        Thank you. I read that but still it's not clear for me. Please consider the example below:

        import QtQuick 2.12
        import QtQuick.Window 2.12
        import QtQuick.Controls 2.5
        
        ApplicationWindow {
            visible: true
            width: 800; height: 600
            title: qsTr("Hello World")
        
            Rectangle {
              width: 100
              height: 80
              anchors.centerIn: parent
              color: "green"
            }
        }
        

        When I run it on different devices with different screen sizes, the result is weird!

        0_1564412459516_4.PNG

        I want this:
        On devices with smaller screens => the size of components smaller
        On devices with bigger screens => the size of components bigger

        I think all mobile applications are behaving that way. Aren't they?

        J J 2 Replies Last reply 30 Jul 2019, 04:52
        0
        • I Offline
          I Offline
          IntruderExcluder
          wrote on 29 Jul 2019, 15:07 last edited by
          #4

          This can be useful too: https://doc.qt.io/qt-5/highdpi.html

          1 Reply Last reply
          2
          • Q qcoderpro
            29 Jul 2019, 15:03

            @lelev

            Thank you. I read that but still it's not clear for me. Please consider the example below:

            import QtQuick 2.12
            import QtQuick.Window 2.12
            import QtQuick.Controls 2.5
            
            ApplicationWindow {
                visible: true
                width: 800; height: 600
                title: qsTr("Hello World")
            
                Rectangle {
                  width: 100
                  height: 80
                  anchors.centerIn: parent
                  color: "green"
                }
            }
            

            When I run it on different devices with different screen sizes, the result is weird!

            0_1564412459516_4.PNG

            I want this:
            On devices with smaller screens => the size of components smaller
            On devices with bigger screens => the size of components bigger

            I think all mobile applications are behaving that way. Aren't they?

            J Online
            J Online
            jsulm
            Lifetime Qt Champion
            wrote on 30 Jul 2019, 04:52 last edited by
            #5

            @qcoderpro Do you use layouts?
            https://doc.qt.io/qt-5/layout.html

            https://forum.qt.io/topic/113070/qt-code-of-conduct

            1 Reply Last reply
            0
            • Q qcoderpro
              29 Jul 2019, 15:03

              @lelev

              Thank you. I read that but still it's not clear for me. Please consider the example below:

              import QtQuick 2.12
              import QtQuick.Window 2.12
              import QtQuick.Controls 2.5
              
              ApplicationWindow {
                  visible: true
                  width: 800; height: 600
                  title: qsTr("Hello World")
              
                  Rectangle {
                    width: 100
                    height: 80
                    anchors.centerIn: parent
                    color: "green"
                  }
              }
              

              When I run it on different devices with different screen sizes, the result is weird!

              0_1564412459516_4.PNG

              I want this:
              On devices with smaller screens => the size of components smaller
              On devices with bigger screens => the size of components bigger

              I think all mobile applications are behaving that way. Aren't they?

              J Online
              J Online
              J.Hilk
              Moderators
              wrote on 30 Jul 2019, 05:27 last edited by
              #6

              hi @qcoderpro you have more or less 2 options.

              Using layouts like @jsulm said, they do exist also for QML components
              https://doc.qt.io/qt-5/qtquicklayouts-index.html

              or instead of fix x, y w, h you use relative positions:

              ApplicationWindow {
                  visible: true
                  width: 800; height: 600
                  title: qsTr("Hello World")
              
                  Rectangle {
                    width: parent.width / 8
                    height: parent.height * 2 / 15
                    anchors.centerIn: parent
                    color: "green"
                  }
              }
              

              Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


              Q: What's that?
              A: It's blue light.
              Q: What does it do?
              A: It turns blue.

              Q 1 Reply Last reply 31 Jul 2019, 20:03
              3
              • J J.Hilk
                30 Jul 2019, 05:27

                hi @qcoderpro you have more or less 2 options.

                Using layouts like @jsulm said, they do exist also for QML components
                https://doc.qt.io/qt-5/qtquicklayouts-index.html

                or instead of fix x, y w, h you use relative positions:

                ApplicationWindow {
                    visible: true
                    width: 800; height: 600
                    title: qsTr("Hello World")
                
                    Rectangle {
                      width: parent.width / 8
                      height: parent.height * 2 / 15
                      anchors.centerIn: parent
                      color: "green"
                    }
                }
                
                Q Offline
                Q Offline
                qcoderpro
                wrote on 31 Jul 2019, 20:03 last edited by
                #7

                @j-hilk
                Thank you. Yes, it was also recommended by @LeLev. Very good, thanks.

                1 Reply Last reply
                0

                1/7

                28 Jul 2019, 15:06

                • Login

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