QML - 如何适应和对齐 GridView 的项目？

Question

我想将所有矩形放入GridView。我没有使用GridLayout，因为当我从GridLayout 中删除一个矩形时，它们会再次与GridLayout 对齐。
所以我使用了GridView 和我的代码：

import QtQuick 2.10
import QtQuick.Window 2.10
import QtQuick.Layouts 1.3

Window {
  visible: true
  width: 420
  height: 720
  title: qsTr("Hello World")


  GridView {
    id: area

    // If device orientation is vertical, GridView shall be 4x(model/4)
    property int verticalChoice: (parent.width < parent.height) ? 4 : 10
    //If device orientation is horizontal, GridView shall be (model/(model/4))x4
    property int horizontalChoice: (parent.width > parent.height) ? 10 : 4

    width: cellWidth * verticalChoice
    height: cellHeight * horizontalChoice
    anchors.centerIn: parent

    cellWidth: (parent.width / verticalChoice)
    cellHeight: (parent.height / horizontalChoice)

    model: 40
    clip: true
    interactive: false

    delegate: Rectangle {
      id: rect
      width: area.cellWidth - 5
      height: area.cellHeight - 5
      color: 'red'
      Text {
        text: index
        color: 'white'
        anchors.centerIn: parent
      }
      MouseArea {
        anchors.fill: parent
        onClicked: rect.destroy(1000)
      }
    }
  }
}

我将GridView 的model 设置为40，并将interactive 设置为false。但我只看到 15 这样的项目：

我也写了anchors.centerIn: parent，但它没有运行。我该怎么做（以适应和对齐）？

Answer 1

对于项目数量，您在horizontalChoice的分配中只是有错误，设置4 * 4网格而不是10 * 4：

property int verticalChoice: (parent.width < parent.height) ? 4 : 10
property int horizontalChoice: (parent.width < parent.height) ? 10 : 4

对于居中问题，anchors.centerIn: parent 实际上按预期工作，但由于您指定代表比cellWidth/cellWidth 小 5px，因此您在右侧和底部有 5px 的空白空间。

为了防止这种情况，您可以使用包装 Item（据我所知 GridView 没有任何 spacing 属性）：

delegate: Item {
    width: area.cellWidth
    height: area.cellHeight
    Rectangle {
        color: 'red'
        anchors {
            fill: parent
            margins: 5
        }

        Text {
            text: index
            color: 'white'
            anchors.centerIn: parent
        }
    }
}