qml - GridLayout 项目大小彼此不相等

Question

我得到了Qt类，它是QQuickImageProvider的子类，这里是requestPixmap函数实现:

QPixmap MyImageProvider::requestPixmap(const QString &id, QSize *size, const QSize       
    &requestedSize){
    int width = 100;
        int height = 50;

        if (size)
            *size = QSize(width, height);
        QPixmap pixmap(requestedSize.width() > 0 ? requestedSize.width() : width,
                       requestedSize.height() > 0 ? requestedSize.height() : height);
        pixmap.fill(QColor(id).rgba());

        return pixmap;
 }

在 qml 我有 GridLayout 哪些项目来自图像提供者。通过单击按钮，我可以显示 1、2 或 4 个项目。这是 qml 文件:

 import QtQuick 2.3
 import QtQuick.Controls 1.2
 import QtQuick.Layouts 1.1
 import QtQuick.Controls.Styles 1.1
 import QtQuick.Window 2.2

 Window{
     id: root
     title: "settings"
     modality: Qt.ApplicationModal
     flags: Qt.Dialog
     minimumHeight: 700
     minimumWidth: 700
     maximumHeight: 700
     maximumWidth: 700
     ColumnLayout{
          id: columnLayout
          anchors.fill: parent
          RowLayout{
              ExclusiveGroup{id: exgroup}
              Button{
                  text: "1x1"
                  checkable: true
                  checked: true
                  Layout.minimumWidth: 100
                  Layout.minimumHeight: 100
                  exclusiveGroup: exgroup
                  onCheckedChanged: {
                      if(checked===true){
                      grid.columns=1
                      grid.rows=1
                      im1.visible = true
                      im2.visible = false
                      im3.visible = false
                      im4.visible = false
                      im1.source = "image://plotPixmap/yellow"
                }
            }
            }

        Button{
            text: "1x2"
            checkable: true
            checked: false
            Layout.minimumWidth: 100
            Layout.minimumHeight: 100
            exclusiveGroup: exgroup
            onCheckedChanged: {
                if(checked===true){
                    grid.columns=1
                    grid.rows=2
                    im1.visible = true
                    im2.visible = true
                    im3.visible = false
                    im4.visible = false
                    im1.source = "image://plotPixmap/red"
                    im2.source = "image://plotPixmap/black"


                }
            }
        }
        Button{
            text: "2x1"
            checkable: true
            checked: false
            Layout.minimumWidth: 100
            Layout.minimumHeight: 100
            exclusiveGroup: exgroup
            onCheckedChanged: {
                if(checked===true){
                    grid.columns=2
                    grid.rows=1
                    im1.visible = true
                    im2.visible = true
                    im3.visible = false
                    im4.visible = false
                    im1.source = "image://plotPixmap/blue"
                    im2.source = "image://plotPixmap/green"

                }
            }
        }
        Button{
            text: "2x2"
            checkable: true
            checked: false
            Layout.minimumWidth: 100
            Layout.minimumHeight: 100
            exclusiveGroup: exgroup
            onCheckedChanged: {
                if(checked===true){
                    grid.columns=2
                    grid.rows=2
                    im1.visible = true
                    im2.visible = true
                    im3.visible = true
                    im4.visible = true
                    im1.source = "image://plotPixmap/blue"
                    im2.source = "image://plotPixmap/green"
                    im3.source = "image://plotPixmap/black"
                    im4.source = "image://plotPixmap/red"
                }
            }
        }
    }
    GridLayout {
        id: grid
        Layout.fillHeight: true
        Layout.fillWidth: true
        Image{
            id: im1
            Layout.fillHeight: true
            Layout.fillWidth: true
            sourceSize.height: height
            sourceSize.width: width
            Layout.rowSpan: 1
            Layout.columnSpan: 1
        }
        Image{
            id: im2
            Layout.fillHeight: true
            Layout.fillWidth: true
            sourceSize.height: height
            sourceSize.width: width
            Layout.rowSpan: 1
            Layout.columnSpan: 1
        }
        Image{
            id: im3
            Layout.fillHeight: true
            Layout.fillWidth: true
            sourceSize.height: height
            sourceSize.width: width
            Layout.rowSpan: 1
            Layout.columnSpan: 1
        }
        Image{
            id: im4
            Layout.fillHeight: true
            Layout.fillWidth: true
            sourceSize.height: height
            sourceSize.width: width
            Layout.rowSpan: 1
            Layout.columnSpan: 1
        }
    }
}
}

在 C++ 中主要:

engine->addImageProvider(QLatin1String("plotPixmap"), new MyImageProvider());

一切正常，但是当我多次按下按钮时，底部图像的尺寸变得越来越小。如何固定图像大小？我希望所有图像的大小都相同，并且它们应该填满按钮下方的所有空间。

Answer 1

这是不同的 fillHeight/fillwidth 集之间相互作用的结果。如文档中所述:

The fillWidth and fillHeight properties can either be true or false. If it is false, the item's size will be fixed to its preferred size. Otherwise, it will grow or shrink between its minimum and maximum size as the layout is resized.

在这种情况下，没有为四张图片设置最小宽度。因此，随着 GridLayout 结构的变化，根据按下的按钮，重新计算约束并在某些模式下(例如 2x1 -> 1x1 -> 2x1)重新计算宽度/高度为第一张图片提供更多空间(根据 flow)。要解决此问题，您应确保为每个图像设置最小宽度/高度，即 Layout.minimumWidth 和 Layout.minimumHeight 附加属性具有正确的值。

在代码中直接设置此类值会导致绑定(bind)循环。再次来自文档:

Note: It is not recommended to have bindings to the x, y, width, or height properties of items in a layout, since this would conflict with the goal of the Layout, and also cause binding loops.

为避免此问题，GridLayout 嵌入到 Item 中，该 Item 填充 ColumnLayout 代替 GridLayout本身。然后将尺寸约束安全地应用于图像。这是最终代码:

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import QtQuick.Window 2.2

Window{
    id: root
    title: "settings"
    modality: Qt.ApplicationModal
    flags: Qt.Dialog
    minimumHeight: 700
    minimumWidth: 700
    maximumHeight: 700
    maximumWidth: 700
    visible:  true

    ColumnLayout{
        id: columnLayout
        anchors.fill: parent
        RowLayout{
            ExclusiveGroup{id: exgroup}
            Button{
                text: "1x1"
                checkable: true
                checked: true
                Layout.minimumWidth: 100
                Layout.minimumHeight: 100
                exclusiveGroup: exgroup
                onCheckedChanged: {
                    if(checked){
                        grid.columns = grid.rows = 1
                        im1.visible = true
                        im2.visible = im3.visible = im4.visible = false
                        im1.source = "image://plotPixmap/yellow"
                    }
                }
            }

            Button{
                text: "1x2"
                checkable: true
                checked: false
                Layout.minimumWidth: 100
                Layout.minimumHeight: 100
                exclusiveGroup: exgroup
                onCheckedChanged: {
                    if(checked){
                        grid.columns = 1
                        grid.rows = 2
                        im1.visible = im2.visible = true
                        im3.visible = im4.visible = false
                        im1.source = "image://plotPixmap/red"
                        im2.source = "image://plotPixmap/black"
                    }
                }
            }
            Button{
                text: "2x1"
                checkable: true
                checked: false
                Layout.minimumWidth: 100
                Layout.minimumHeight: 100
                exclusiveGroup: exgroup
                onCheckedChanged: {
                    if(checked){
                        grid.columns = 2
                        grid.rows = 1
                        im1.visible = im2.visible = true
                        im3.visible = im4.visible = false
                        im1.source = "image://plotPixmap/blue"
                        im2.source = "image://plotPixmap/green"

                    }
                }
            }
            Button{
                text: "2x2"
                checkable: true
                checked: false
                Layout.minimumWidth: 100
                Layout.minimumHeight: 100
                exclusiveGroup: exgroup
                onCheckedChanged: {
                    if(checked){
                        grid.columns = grid.rows = 2
                        im1.visible = im2.visible = im3.visible = im4.visible = true
                        im1.source = "image://plotPixmap/blue"
                        im2.source = "image://plotPixmap/green"
                        im3.source = "image://plotPixmap/black"
                        im4.source = "image://plotPixmap/red"
                    }
                }
            }
        }
        Item {      // layout ensure to fill the available space
            Layout.fillHeight: true
            Layout.fillWidth: true

            GridLayout {
                id: grid
                anchors.fill: parent     // anchor to the available space

                Image{
                    id: im1
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    Layout.minimumWidth: grid.width / 2      // constraint to the min width
                    Layout.minimumHeight:  grid.height / 2   // constraint to the min height
                    Layout.rowSpan: 1
                    Layout.columnSpan: 1
                }
                Image{
                    id: im2
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    Layout.minimumWidth: grid.width / 2     // constraint to the min width
                    Layout.minimumHeight:  grid.height / 2  // constraint to the min height
                    Layout.rowSpan: 1
                    Layout.columnSpan: 1
                }
                Image{
                    id: im3
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    Layout.minimumWidth: grid.width / 2     // constraint to the min width
                    Layout.minimumHeight:  grid.height / 2  // constraint to the min height
                    Layout.rowSpan: 1
                    Layout.columnSpan: 1
                }
                Image{
                    id: im4
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    Layout.minimumWidth: grid.width / 2     // constraint to the min width
                    Layout.minimumHeight:  grid.height / 2  // constraint to the min height
                    Layout.rowSpan: 1
                    Layout.columnSpan: 1
                }
            }
        }
    }
}