es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

QtQuick / QML: Reparentar un elemento a la última celda de una GridLayout no funciona.

13 Jul, 2023 Programación

En mi aplicación, quiero colocar manualmente elementos en una GridLayout y moverlos entre celdas arrastrando y soltando, al igual que en un tablero de ajedrez. Lo hago configurando manualmente el padre del elemento a colocar en el índice de la celda. Encontré este enfoque en otro post y me gusta mucho.

Para explicar mi problema, he creado un ejemplo mínimo funcional.

import QtQuick
import QtQuick.Window
import QtQuick.Layouts 1.12

Window {
    width: 640
    height: 100
    visible: true

    GridLayout{
        columns: 10

        id: grid
        anchors.fill: parent
        Repeater{
            model: 10 * 2

            Rectangle{
                color: "lightblue"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }
        }
    }

    Text{
        property int cellidx: 1
        parent: grid.children[cellidx]
        font.pointSize: 18
        font.bold: true
        text: cellidx
    }

    Text{
        property int cellidx: 18
        parent: grid.children[cellidx]
        font.pointSize: 18
        font.bold: true
        text: cellidx
    }

    Text{
        property int cellidx: 19
        parent: grid.children[cellidx]
        font.pointSize: 18
        font.bold: true
        text: cellidx
    }
}

En principio, esto ya funciona bastante bien. Excepto para la última celda de la GridLayout. Como puedes ver en la captura de pantalla, colocar el elemento Text en la última celda no funciona.

Captura de pantalla: [link a la imagen capturada]

Cuando intento colocar un elemento en la última celda usando parent: grid.children[cellidx] con cellidx igual al índice de la última celda, siempre se coloca en o cerca de la primera celda del diseño.

También intenté usar <grid> para el diseño, pero observé el mismo efecto allí. Tal vez alguien tenga una idea para este problema de principiante. Desafortunadamente, Google tampoco pudo ayudarme. Muchas gracias.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema que estás enfrentando se debe a que los elementos Grid y GridLayout en QtQuick no crean hijos para las celdas desocupadas. Como resultado, cuando intentas establecer el padre de un elemento en una celda inexistente, se crea como hijo de la primera celda en su lugar.

    Para resolver este problema, debes crear un elemento ficticio en la última celda de GridLayout para asegurarte de que exista. Aquí tienes una versión actualizada de tu código que hace esto:

    import QtQuick
import QtQuick.Window
import QtQuick.Layouts 1.12

Window {
    width: 640
    height: 100
    visible: true

    GridLayout{
        columns: 10
        id: grid
        anchors.fill: parent

        Repeater{
            model: 10 * 2

            Rectangle{
                color: "lightblue"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }
        }

        // Crea un elemento ficticio en la última celda
        Rectangle {
            id: dummyItem
            visible: false
            Layout.topMargin: grid.cellSize
            Layout.leftMargin: 9 * grid.cellSize
            Layout.rowSpan: 2
            Layout.columnSpan: 2
        }
    }

    Text{
        property int cellidx: 1
        parent: grid.children[cellidx]
        font.pointSize: 18
        font.bold: true
        text: cellidx
    }

    Text{
        property int cellidx: 18
        parent: grid.children[cellidx]
        font.pointSize: 18
        font.bold: true
        text: cellidx
    }

    Text{
        property int cellidx: 19
        parent: grid.children[cellidx]
        font.pointSize: 18
        font.bold: true
        text: cellidx
    }
}

    En esta versión del código, hemos agregado un elemento Rectangle con el ID dummyItem a la última celda de la cuadrícula. Lo hemos hecho invisible (visible: false) para que no interfiera con la ubicación de otros elementos.

    Con este elemento ficticio en su lugar, deberías poder establecer el padre de tus elementos Text en el índice de celda adecuado de GridLayout sin ningún problema.

Comments are closed.