How to change the size rectangle when orientation was changed?



  • 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


  • Moderators



  • Yes, i do.
    rectangle{

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

    }
    I must change proportions...


  • Moderators

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



  • @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
        }
    }
    


  • @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?



  • 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



  • Thanks
    I use:

    Screen.onPrimaryOrientationChanged:{
    }
    

    I had need not additional code in main.cpp


  • Moderators


Log in to reply