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我有qml项来自图片提供商。通过单击按钮，我可以显示1,2或4项。这是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 } } } }文件：

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

在c ++ main中：

{{1}}

一切正常但是当我按下按钮几次后，底部图像的尺寸变得越来越小。如何修复图像大小？我希望所有图像都具有相同的尺寸，并且它们可以填充按钮下的所有空间。

Answer 1

这是不同fillHeight / fillwidth集之间互动的结果。如文档中所述：

fillWidth和fillHeight属性可以是true或false。如果为false，则项目的大小将固定为其首选大小。否则，它将在最小和最大尺寸之间增长或缩小 随着布局的调整大小。

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

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

注意：建议不要绑定x，y，width或布局中项目的高度属性，因为这会与之冲突布局的目标，也导致绑定循环。

为避免此问题，GridLayout嵌入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
                }
            }
        }
    }
}

GridLayout项目大小彼此不相等

1 个答案: