Fatal编程技术网
  • qml/
  • Qml GridLayout项大小不相等

Qml GridLayout项大小不相等

qml

Qml GridLayout项大小不相等,qml,Qml,我得到了Qt类，它是QQuickImageProvider的子类，下面是requestPixmap函数实现： QPixmap MyImageProvider::requestPixmap(const QString &id, QSize *size, const QSize &requestedSize){ int width = 100; int height = 50; if (size)

我得到了
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());
一切正常，但当我按下几次按钮时，底部图像的大小变得越来越小。如何确定图像的大小？我希望所有图像的大小都相同，并且它们应该填充按钮下的所有空间。

这是不同的
填充高度
/
填充宽度
集合之间交互的结果。如文件所述：

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

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

在代码中直接设置这些值会导致绑定循环。同样，从文件中可以看出：

注意：不建议绑定到x、y、width或 布局中项目的高度属性，因为这将与 布局的目标，并导致绑定循环

为避免此问题，将
GridLayout
嵌入到
项中，该项填充
列布局，而不是
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
                }
            }
        }
    }
}