如何在 GridLayout - QML 中移动单元格？

Posted 2023-02-16

【中文标题】如何在 GridLayout - QML 中移动单元格？

【英文标题】：How to move a cell in GridLayout - QML?

【发布时间】：2015-06-24 07:05:53

【问题描述】：

考虑到documentation of GridLayout，这是我尝试过的：

---

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1

Window

    visible: true

    MainForm
    
        GridLayout 
            id: gridLayout
            columns: 3

            height: 100
            width: 100
            property int oneRow: 0
            property int oneCol: 0

            Rectangle  id: one; Layout.row :gridLayout.oneRow; Layout.column: gridLayout.oneCol;
                height: 50; width: 50; color: "brown"

            Rectangle  height: 50; width: 50; color: "red" 
            Rectangle  height: 50; width: 50; color: "blue"
            Rectangle  height: 50; width: 50; color: "green"
            Rectangle  height: 50; width: 50; color: "yellow"
        

        Component.onCompleted:
        
            gridLayout.oneRow = 2
            gridLayout.oneCol = 2
        
    

如果我从Component.onCompleted 注释掉这段代码，

gridLayout.oneRow = 2
gridLayout.oneCol = 2

我明白了：

而我希望棕色方块“移动到”第二行的最后一列。 所以，我写道：

gridLayout.oneRow = 1
gridLayout.oneCol = 2

在Component.onCompleted.

然后，我得到了以下信息：

这不是我想要的。

请帮忙。

【问题讨论】：

如果在声明中最后设置棕色矩形会怎样？

@Thomas 我在 OP 中双引号“移至”是有原因的。

我在这里看到了 很多 奇怪的东西，如果我的愚蠢问题伤害了你，我很抱歉

Layout.row (&column) 有帮助吗？

【参考方案1】：

如果您希望更改GridLayout 中某些项目的单元格编号，则需要将初始row number and column number 分配给所有元素_yourself_，然后动态更改所需项目的位置，如下所示：

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1

Window

    visible: true

    MainForm
    
        GridLayout 
            id: gridLayout

            height: 100
            width: 100

            property int oneRow: 0
            property int oneCol: 0
            Rectangle  id: one;
                Layout.row :gridLayout.oneRow; Layout.column: gridLayout.oneCol;
                height: 50; width: 50; color: "brown"

            property int twoRow: 0
            property int twoCol: 1
            Rectangle  id: two;
                Layout.row :gridLayout.twoRow; Layout.column: gridLayout.twoCol;
                height: 50; width: 50; color: "red" 

            property int threeRow: 0
            property int threeCol: 2
            Rectangle  id: three;
                Layout.row :gridLayout.threeRow; Layout.column: gridLayout.threeCol;
                height: 50; width: 50; color: "blue"

            property int fourRow: 1
            property int fourCol: 0
            Rectangle  id: four;
                Layout.row :gridLayout.fourRow; Layout.column: gridLayout.fourCol;
                height: 50; width: 50; color: "green"

            property int fiveRow: 1
            property int fiveCol: 1
            Rectangle  id: five;
                Layout.row :gridLayout.fiveRow; Layout.column: gridLayout.fiveCol;
                height: 50; width: 50; color: "yellow"
        

        Component.onCompleted:
        
            gridLayout.oneRow = 1
            gridLayout.oneCol = 2
        
    

现在，您可以在Component.onCompleted 中看到以下代码将棕色矩形移动到第 2 行的第 3 列。

Component.onCompleted:
  
      gridLayout.oneRow = 1
      gridLayout.oneCol = 2