I have rectangles with a certain aspect ratio and rectangles with the inverse aspect ratio. I would like to arrange them in a grid layout of my choosing (doesn't need to be a regular grid, on the contrary: I'd prefer a solution where I can build up RowLayout
s and ColumnLayout
s at will).
I know I can have scaling items in my Layouts using Layout.fillHeight
and Layout.fillWidth
. Unfortunately, I can find no way to properly define aspect ratios for my Rectangle
s. I know QML Image
can do it (through its fillMode
property) but I see no simple way of doing it nicely.
Any help or pointers in the right direction would be much appreciated!
Note I'm assuming QML Layouts is the way to go, but if there is a functional solution with just anchors or a plain Row
/ Column
setup, I'm all for it!
Also note that I would prefer to keep the area of te two types of Rectangle
the same, as it seems while experimenting, this is not so trivial...
EDIT
An attempt of what I mean, minus the equal area constraint. The rectangles fill the width, but leave space in the height because they are constrained by their aspect ratio and the filled width. Same should go for the height, but I'm failing at combining the two.
You can use property binding to bind the width
of the rectangle with height
using aspect ratio as follows,
import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Layouts 1.0
Window {
id: root
visible: true
width: 640
height: 480
title: qsTr("Hello World")
property int minWidth: 150
property int maxWidth: 300
property int minHeight: 150
property int maxHeight: 250
property int rowWidth: root.width/3 //Change accordingly the width of each child item w.r.t. the width of the root.
Row {
id: layout
anchors.fill: parent
spacing: 6
Rectangle {
color: 'red'
// 4/3 is the aspect ratio of the first Rectangle
height: (3*width/4)<root.minHeight ? root.minHeight : ( (3*width/4)>root.maxHeight ? root.maxHeight : 3*width/4 )
width: (root.rowWidth) < root.minWidth ? root.minWidth : ( root.rowWidth > root.maxWidth ? root.maxWidth : root.rowWidth)
Text {
anchors.centerIn: parent
text: parent.width + 'x' + parent.height
}
}
Rectangle {
color: 'green'
// 3/4 is the aspect ratio of the second Rectangle
height: (4*width/3)<root.minHeight ? root.minHeight : ( (4*width/3)>root.maxHeight ? root.maxHeight : 4*width/3 )
width: (root.rowWidth) < root.minWidth ? root.minWidth : ( root.rowWidth > root.maxWidth ? root.maxWidth : root.rowWidth)
Text {
anchors.centerIn: parent
text: parent.width + 'x' + parent.height
}
}
}
}
I have been struggling for few days on the proper way to do that. I could not found any working exemple so I wrote my own.
This rectangle will always respect its aimedRatio and will keeps its margins. The trick here is to treat to different cases : Either the parents ratio is larger that the aimed one or not. In one case you bind the width to parent and set height according to. In the other case you do it the other way.
Rectangle {
color : 'green'
// INPUTS
property double rightMargin : 20
property double bottomMargin : 20
property double leftMargin : 20
property double topMargin : 20
property double aimedRatio : 3/4
// SIZING
property double availableWidth : parent.width - rightMargin - leftMargin
property double availableHeight : parent.height - bottomMargin - topMargin
property bool parentIsLarge : parentRatio > aimedRatio
property double parentRatio : availableHeight / availableWidth
height : parentIsLarge ? width * aimedRatio : availableHeight
width : parentIsLarge ? availableWidth : height / aimedRatio
anchors.top : parent.top
anchors.topMargin : topMargin
anchors.left : parent.left
anchors.leftMargin : leftMargin
}
Hope it will help out people who arrive here with google search !
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.