Qt 6.12 LTS is out! See what's new in the release
blog
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.
