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()); 

Все работает, но при нажатии кнопки несколько раз размера донных изображений стало все меньше и меньше. Как исправить размер o изображений? Я хочу, чтобы все изображения были одинакового размера, и они заполняли все пространство под кнопками.

Answer 1

Это результат взаимодействия между различными наборами fillHeight/fillwidth. Как указано в документации:

Свойства fillWidth и fillHeight могут быть истинными или ложными. Если это неверно, размер элемента будет зафиксирован в соответствии с его предпочтительным размером. В противном случае он будет расти или уменьшаться между его минимальным и максимальным размером при изменении размера.

В этом случае минимальная ширина не установлена ​​для четырех изображений. Следовательно, по мере изменения структуры GridLayout, в соответствии с нажатой кнопкой, ограничения пересчитываются и в определенных шаблонах (например, 2x1 -> 1x1 -> 2x1) пересчитанные ширины/высоты дают больше места для первых изображений (в соответствии с flow). Чтобы устранить проблему, вы должны убедиться, что минимальная ширина/высота установлены на каждом изображении, то есть Layout.minimumWidth и Layout.minimumHeight приложенные свойства имеют правильные значения.

Непосредственно установить такие значения в результате кода в цикле привязки. Опять же из документации:

Примечания: Не рекомендуется иметь привязки к й, у, ширины или свойства высоты элементов в макете, так как это будет противоречить целям макета, а также вызывают связующие петли.

Чтобы избежать этой проблемы, 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 
       } 
      } 
     } 
    } 
}