如何使用QML布局在网格中排列纵横比缩放的项目？

Question

我有一个具有特定长宽比的矩形和一个具有相反长宽比的矩形。 我想将它们安排在我选择的网格布局中（相反，不必是常规网格：我更喜欢一个可以随意构建RowLayout和ColumnLayout的解决方案）。

我知道我可以使用Layout.fillHeight和Layout.fillWidth在我的布局中缩放项目。 不幸的是，我找不到正确定义Rectangle的纵横比的方法。 我知道QML Image可以做到这一点（通过它的fillMode属性），但是我发现没有简单的方法可以很好地做到这一点。

任何帮助或正确方向的指点将不胜感激！

注意，我假设要使用QML Layouts，但是如果有仅锚点或简单的Row / Column设置的功能解决方案，我将全力以赴！

还要注意，我宁愿将两种类型的Rectangle的面积保持相同，就像在实验中看起来那样，这并不是那么简单...

编辑

我的意思是尝试减去等面积约束。 矩形会填满宽度，但在高度上会留出空间，因为它们受纵横比和填充宽度的限制。 高度应该一样，但是我不能将两者结合起来。

Answer 1

您可以按如下所示使用属性绑定通过长宽比将矩形的width与height绑定在一起，

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

Answer 2

我一直在努力寻找正确的方法来做这几天。 我找不到任何工作实例，所以我写了自己的。

这个矩形将始终遵守其aimedRatio并将保留其边距。 这里的窍门是处理不同的情况：父母比例是否大于目标比例。 在一种情况下，您将宽度绑定到父对象并根据其设置高度。 在另一种情况下，您可以采用其他方式。

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
}

希望它能帮助通过Google搜索到达这里的人们！