GridLayout项目大小彼此不相等

时间:2014-12-08 14:23:41

标签: qml

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

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

1 个答案:

答案 0 :(得分:5)

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

  

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

在这种情况下,不为四个图像设置最小宽度。因此,当GridLayout结构发生变化时,根据按下的按钮,重新计算约束并以某些模式(例如2x1 -> 1x1 -> 2x1)重新计算的宽度/高度为第一幅图像提供更多空间(根据flow)。要解决此问题,您应确保在每张图片上设置最小宽度/高度,即Layout.minimumWidthLayout.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
                }
            }
        }
    }
}