GridLayout项目大小彼此不相等

1 回答

• 4

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

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

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

  在代码中直接设置这样的值会导致绑定循环 . 再次从文档：

  注意：建议不要对布局中项目的x，y，width或height属性进行绑定，因为这会与布局的目标发生冲突，并且还会导致绑定循环 .

  为了避免这个问题， 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
                  }
              }
          }
      }
  }
  

  回复于 2024-05-05T20:54:56+08:00