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

Question

我有具有一定纵横比的矩形和具有反纵横比的矩形。我想将它们排列在我选择的网格布局中(不需要是常规网格，相反:我更喜欢可以随意构建 RowLayout 和 ColumnLayout 的解决方案)。

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

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

注意我假设 QML 布局是要走的路，但如果有一个只有 anchor 或普通 Row 的功能解决方案/Column设置，我全力以赴!

另请注意，我更愿意保留两种类型的 Rectangle 的面积。同样，就像在实验时看起来一样，这并不是那么微不足道...

编辑

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

Answer 1

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

此矩形将始终尊重其目标比率并保持其边距。
这里的诀窍是针对不同的情况进行处理: parent 比例是否大于目标比例。在一种情况下，您将宽度绑定(bind)到父级并根据设置高度。在另一种情况下，您以另一种方式进行。

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
}

希望它能帮助通过谷歌搜索到达这里的人!