Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

GridLayout, maintaining an aspect ratio of a component



  • Is it possible to maintain the aspect ratio of a component in a GridLayout?:

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Layouts 1.12
    
    Window {
        id: mainwin
        visible: true
        width: 1920/2
        height: 1080/2
        title: qsTr("Dynamic GUI Testing")
    
        property bool widthLarger: width>height
        property real ratio: width/height
    
        onRatioChanged: {
            //console.log(ratio)
        }
    
        Component.onCompleted: {
    
        }
    
        GridLayout {
            id: super_grid
            anchors.fill: parent
            flow: GridLayout.TopToBottom
            columnSpacing: 0
            rowSpacing: 0
    
            GridLayout {
                id: meters_grid
                Layout.fillWidth: true
                columnSpacing: 0
                rowSpacing: 0
    
                property int minHeight: mainwin.height*0.1
    
                flow:  mainwin.widthLarger ? GridLayout.LeftToRight : GridLayout.TopToBottom
                Rectangle {
                    id: meters1
                    Layout.fillWidth: true
                    Layout.minimumHeight: parent.minHeight
    
                    color: "red"
                }
                Rectangle {
                    id: meters2
                    Layout.fillWidth: true
                    Layout.minimumHeight: parent.minHeight
    
                    color: "blue"
                }
                // end meters_grid
            }
    
            GridLayout {
                id: content_grid
                Layout.fillWidth: true
                columnSpacing: 0
                rowSpacing: 0
    
                property int minHeight: mainwin.widthLarger ? mainwin.height*0.8 : mainwin.height*0.3
    
                flow:  mainwin.widthLarger ? GridLayout.LeftToRight : GridLayout.TopToBottom
                Rectangle {
                    id: content1
                    Layout.fillWidth: true
                    Layout.minimumHeight: parent.minHeight
    
                    color: "green"
                }
                Rectangle {
                    id: content2
                    Layout.fillWidth: true
                    Layout.minimumHeight: parent.minHeight
                    //Layout.preferredWidth: height
    
                    color: "orange"
                }
                // end content_grid
            }
    
            GridLayout {
                id: menus_grid
                Layout.fillWidth: true
                columnSpacing: 0
                rowSpacing: 0
    
                property int minHeight: mainwin.height*0.1
    
                flow:  mainwin.widthLarger ? GridLayout.LeftToRight : GridLayout.TopToBottom
                Rectangle {
                    id: menus1
                    Layout.fillWidth: true
                    Layout.minimumHeight: parent.minHeight
    
                    color: "pink"
                }
                Rectangle {
                    id: menus2
                    Layout.fillWidth: true
                    Layout.minimumHeight: parent.minHeight
    
                    color: "cyan"
                }
                // end menus_grid
            }
            // end super_grid
        }
    }
    

    I want to try and keep content2 with a square aspect ratio as it will contain video.



  • I guess I just needed to play with it some more:

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Layouts 1.12
    
    Window {
        id: mainwin
        visible: true
        width: 1920/2
        height: 1080/2
        title: qsTr("Dynamic GUI Testing")
    
        property bool widthLarger: width>height
        property real ratio: width/height
    
        onRatioChanged: {
            //console.log(ratio)
        }
    
        Component.onCompleted: {
    
        }
    
        GridLayout {
            id: super_grid
            anchors.fill: parent
            flow: GridLayout.TopToBottom
            columnSpacing: 0
            rowSpacing: 0
    
            GridLayout {
                id: meters_grid
                Layout.fillWidth: true
                columnSpacing: 0
                rowSpacing: 0
    
                property int minHeight: mainwin.widthLarger ? mainwin.height*0.1 : mainwin.height*0.075
    
                flow:  mainwin.widthLarger ? GridLayout.LeftToRight : GridLayout.TopToBottom
                Rectangle {
                    id: meters1
                    Layout.fillWidth: true
                    Layout.minimumHeight: parent.minHeight
    
                    color: "red"
                }
                Rectangle {
                    id: meters2
                    Layout.fillWidth: true
                    Layout.minimumHeight: parent.minHeight
    
                    color: "blue"
                }
                // end meters_grid
            }
    
            GridLayout {
                id: content_grid
                Layout.fillWidth: true
                columnSpacing: 0
                rowSpacing: 0
    
                property int minHeight: mainwin.widthLarger ? mainwin.height*0.8 : mainwin.height*0.375
                property int minWidth: mainwin.width*0.6
                property real vidAspect: 1.0
    
                flow:  mainwin.widthLarger ? GridLayout.LeftToRight : GridLayout.TopToBottom
                Rectangle {
                    id: content1
                    Layout.fillWidth: true
                    //Layout.minimumWidth: parent.minWidth
                    Layout.minimumHeight: mainwin.widthLarger ? parent.minHeight : parent.minHeight*1.2
    
                    color: "green"
                }
                Rectangle {
                    id: content2
                    //Layout.fillWidth: true
                    //Layout.minimumHeight: parent.minHeight
                    Layout.preferredHeight: mainwin.widthLarger ? width/parent.vidAspect : parent.minHeight*0.8
                    Layout.preferredWidth: mainwin.widthLarger ? parent.width*0.4 : height*parent.vidAspect
                    Layout.maximumWidth: mainwin.widthLarger ? mainwin.width*0.4 : mainwin.width
                    Layout.alignment: mainwin.widthLarger ? Qt.AlignVCenter : Qt.AlignHCenter
    
                    color: "orange"
                }
                // end content_grid
            }
    
            GridLayout {
                id: menus_grid
                Layout.fillWidth: true
                columnSpacing: 0
                rowSpacing: 0
    
                property int minHeight: mainwin.widthLarger ? mainwin.height*0.1 : mainwin.height*0.05
    
                flow:  mainwin.widthLarger ? GridLayout.LeftToRight : GridLayout.TopToBottom
                Rectangle {
                    id: menus1
                    Layout.fillWidth: true
                    Layout.minimumHeight: parent.minHeight
    
                    color: "pink"
                }
                Rectangle {
                    id: menus2
                    Layout.fillWidth: true
                    Layout.minimumHeight: parent.minHeight
    
                    color: "cyan"
                }
                // end menus_grid
            }
            // end super_grid
        }
    }
    

    I made the aspect of the video a property so I can choose the ratio.


Log in to reply