5

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

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

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

注意我假设 QML 布局是要走的路，但如果有一个只有锚点或普通Row/Column设置的功能解决方案，我完全赞成！

另请注意，我更愿意保持两种类型的区域Rectangle相同，因为在实验时似乎，这并不是那么微不足道......

编辑

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

1

4

3 回答 3

3

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

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

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
}

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

于 2019-05-17T12:18:48.150 回答
1

我确实赞成@CharlesSALA 的答案（因为它有效！），但我认为我也会根据布局提供替代答案。

AspectItem负责提供正确的边距以保持宽度，使用implicitWidth. Layout负责提供正确的边距以保持高度，使用Layout.maximumHeight.

这同样适用于 aGridLayout代替ColumnLayout& RowLayout。结果略有不同，因为列必须在所有行中保持对齐，但在这两种情况下，矩形的纵横比都根据需要保留。

AspectItem.qml

import QtQuick 2.11

Item {
    id: container
    property real aimedRatio: 3/4
    property alias color: content.color
    implicitWidth: height*container.aimedRatio
    implicitHeight: width/container.aimedRatio

    Rectangle {
        id: content
        anchors.horizontalCenter: container.horizontalCenter

        height: container.height
        implicitWidth: height*container.aimedRatio
    }
}

main.qml

import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.11

ApplicationWindow {
    id: window
    visible: true
    width: 800
    height: 800
    y: 0

    ColumnLayout {
        anchors.fill: parent

        RowLayout {
            width: parent.width
            AspectItem {
                color: "darkseagreen"
                aimedRatio: 1/2
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.maximumHeight: implicitHeight
            }

            AspectItem {
                color: "seagreen"
                aimedRatio: 2/1
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.maximumHeight: implicitHeight
            }

            AspectItem {
                color: "lightseagreen"
                aimedRatio: 1/2
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.maximumHeight: implicitHeight
            }
        }

        RowLayout {
            width: parent.width
            AspectItem {
                color: "darkcyan"
                aimedRatio: 2/1
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.maximumHeight: implicitHeight
            }

            AspectItem {
                color: "cyan"
                aimedRatio: 1/2
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.maximumHeight: implicitHeight
            }

            AspectItem {
                color: "lightcyan"
                aimedRatio: 2/1
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.maximumHeight: implicitHeight
            }
        }

        RowLayout {
            width: parent.width
            AspectItem {
                color: "darksalmon"
                aimedRatio: 1/2
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.maximumHeight: implicitHeight
            }

            AspectItem {
                color: "salmon"
                aimedRatio: 2/1
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.maximumHeight: implicitHeight
            }

            AspectItem {
                color: "lightsalmon"
                aimedRatio: 1/2
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.maximumHeight: implicitHeight
            }
        }
    }
}

结果

启动时：

发射时

拉伸窄：

拉伸窄

拉宽：

拉宽

于 2021-07-10T22:20:16.797 回答
0

您可以使用属性绑定来绑定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
            }
        }
    }
}
于 2017-01-03T08:30:59.577 回答