Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. Mobile and Embedded
  4. How to change the size rectangle when orientation was changed?
Forum Updated to NodeBB v4.3 + New Features

How to change the size rectangle when orientation was changed?

Scheduled Pinned Locked Moved Unsolved Mobile and Embedded
9 Posts 4 Posters 3.3k 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.
  • P Offline
    P Offline
    Pyroxar
    wrote on last edited by
    #1

    Do QML have event when orientation primary display has been changed?
    Do you know any way to change rectangle size in qml?

    I have:
    https://pastebin.com/phZeXpRg

    jsulmJ 1 Reply Last reply
    0
    • P Pyroxar

      Do QML have event when orientation primary display has been changed?
      Do you know any way to change rectangle size in qml?

      I have:
      https://pastebin.com/phZeXpRg

      jsulmJ Offline
      jsulmJ Offline
      jsulm
      Lifetime Qt Champion
      wrote on last edited by
      #2

      @Pyroxar Did you check http://doc.qt.io/qt-5/qml-qtquick-window-screen.html ?

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

      1 Reply Last reply
      0
      • P Offline
        P Offline
        Pyroxar
        wrote on last edited by Pyroxar
        #3

        Yes, i do.
        rectangle{

        width: Screen.width/2
        height: 100
        
         onWHENORIENTATIONWASCHANGEDEVENT{
        	width: Screen.width/4 //
        }
        

        }
        I must change proportions...

        jsulmJ D 2 Replies Last reply
        0
        • P Pyroxar

          Yes, i do.
          rectangle{

          width: Screen.width/2
          height: 100
          
           onWHENORIENTATIONWASCHANGEDEVENT{
          	width: Screen.width/4 //
          }
          

          }
          I must change proportions...

          jsulmJ Offline
          jsulmJ Offline
          jsulm
          Lifetime Qt Champion
          wrote on last edited by
          #4

          @Pyroxar Wouldn't it be easier to use layouts?

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

          1 Reply Last reply
          0
          • P Pyroxar

            Yes, i do.
            rectangle{

            width: Screen.width/2
            height: 100
            
             onWHENORIENTATIONWASCHANGEDEVENT{
            	width: Screen.width/4 //
            }
            

            }
            I must change proportions...

            D Offline
            D Offline
            Devopia53
            wrote on last edited by
            #5

            @Pyroxar

            Something like this:

            // in main.cpp

            QScreen *screen = QGuiApplication::primaryScreen();
            screen->setOrientationUpdateMask(Qt::LandscapeOrientation| Qt::PortraitOrientation | Qt::InvertedLandscapeOrientation | Qt::InvertedPortraitOrientation);
            

            // in your QML

            Window {
                Rectangle {
                    id: rect
                }
            
                Screen.onOrientationChanged: {
                    rect.width = Screen.width / 4
                }
            }
            
            1 Reply Last reply
            0
            • P Offline
              P Offline
              Pyroxar
              wrote on last edited by
              #6

              @Devopia53
              I did just what you told me.
              in main.cpp:

              QScreen *screen = QGuiApplication::primaryScreen();
                  screen->setOrientationUpdateMask(Qt::LandscapeOrientation| Qt::PortraitOrientation | Qt::InvertedLandscapeOrientation | Qt::InvertedPortraitOrientation);
              

              in qml

              Rectangle{
              	Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
              	Layout.preferredWidth: childrenRect.width
              	Layout.preferredHeight: childrenRect.height
              
              	color: "#26282E"
              	Image {
              	    id: image
              	    source: "qrc:/e12-mini.jpg"
              	    width: Screen.width*6/8
              	    fillMode: Image.PreserveAspectFit
              	    anchors.top: parent.top
              
              	    Screen.onOrientationChanged: {
              		if(Screen.primaryOrientation === Qt.PortraitOrientation)
              		{
              		    image.width = (Screen.width*6)/8;
              		    //image.source = "qrc:/e12-mini.jpg";
              		}
              		else
              		{
              		    image.width = Screen.height/2;
              		    //image.source = "qrc:/e13-mini.jpg";
              		}
              	    }
              	}
              }
              

              But It isn't work
              @jsulm
              How i should use layout?

              jsulmJ 1 Reply Last reply
              0
              • GTDevG Offline
                GTDevG Offline
                GTDev
                wrote on last edited by GTDev
                #7

                Hi!

                You can also use V-Play Engine for your app and listen to changes in the App::portrait property, which is true when the device is used in portrait mode, false otherwise.

                import VPlayApps 1.0
                
                App {
                  id: app
                  
                  onPortraitChanged: {
                    if(app.portrait) {
                      // changed from landscape to portrait
                    }
                    else {
                      // changed from portrait to landscape    
                    }
                  }
                
                  // other code
                }
                

                Cheers,
                GT

                Senior Developer at Felgo - https://felgo.com/qt

                Develop mobile Apps for iOS & Android with Qt
                Felgo is an official Qt Technology Partner

                1 Reply Last reply
                0
                • P Offline
                  P Offline
                  Pyroxar
                  wrote on last edited by
                  #8

                  Thanks
                  I use:

                  Screen.onPrimaryOrientationChanged:{
                  }
                  

                  I had need not additional code in main.cpp

                  1 Reply Last reply
                  0
                  • P Pyroxar

                    @Devopia53
                    I did just what you told me.
                    in main.cpp:

                    QScreen *screen = QGuiApplication::primaryScreen();
                        screen->setOrientationUpdateMask(Qt::LandscapeOrientation| Qt::PortraitOrientation | Qt::InvertedLandscapeOrientation | Qt::InvertedPortraitOrientation);
                    

                    in qml

                    Rectangle{
                    	Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
                    	Layout.preferredWidth: childrenRect.width
                    	Layout.preferredHeight: childrenRect.height
                    
                    	color: "#26282E"
                    	Image {
                    	    id: image
                    	    source: "qrc:/e12-mini.jpg"
                    	    width: Screen.width*6/8
                    	    fillMode: Image.PreserveAspectFit
                    	    anchors.top: parent.top
                    
                    	    Screen.onOrientationChanged: {
                    		if(Screen.primaryOrientation === Qt.PortraitOrientation)
                    		{
                    		    image.width = (Screen.width*6)/8;
                    		    //image.source = "qrc:/e12-mini.jpg";
                    		}
                    		else
                    		{
                    		    image.width = Screen.height/2;
                    		    //image.source = "qrc:/e13-mini.jpg";
                    		}
                    	    }
                    	}
                    }
                    

                    But It isn't work
                    @jsulm
                    How i should use layout?

                    jsulmJ Offline
                    jsulmJ Offline
                    jsulm
                    Lifetime Qt Champion
                    wrote on last edited by
                    #9

                    @Pyroxar http://doc.qt.io/qt-5/qtquicklayouts-index.html

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

                    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