Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

PROBLEMA CON GRIDLAYOUT



  • Buenas amigos, estoy tratando de resolver y no entiendo que hago mal en el codigo, tengo un GridLayout donde quiero 3 Columns x 2 Rows, donde la primera Row debe tener un Rectangle posicionado en la Column 1 y ocupe 2 Columns y la segunda Row un Rectangle posicionado en la Columna 0 y ocupe 3 Columns, pero Qt Studio me muestra la siguiente imagen ( donde la primera Row tiene un Rectangle que ocupa la mitad del GridLayout), que estoy haciendo mal???

    import QtQuick 2.5
    import QtQuick.Controls 1.4
    import QtQuick.Layouts 1.1
    
    ApplicationWindow {
        visible: true
        width: 480
        height: 480
        title: qsTr("Hello World")
    
    
       GridLayout {
           id: grid
           anchors.fill: parent
    
           rows: 2
           columns: 3
    
           Rectangle {
                color: "red"
                Layout.fillHeight: true
                Layout.fillWidth: true
    
                Layout.row: 0
                Layout.column: 1
                Layout.columnSpan: 2
                Layout.rowSpan: 1
                Text {
                    color: "white"
                    text: qsTr("Red")
                }
           }
    
    
           Rectangle {
                color: "blue"
                Layout.fillHeight: true
                Layout.fillWidth: true
                Layout.columnSpan: 3
                Layout.rowSpan: 1
                Layout.row: 1
                Layout.column: 0
                Text {
                    text: qsTr("Blue")
                    color: "white"
                }
           }
    
    
       }
    }
    
    

    ESTA ES LA IMAGEN QUE RESULTA DEL CODIGO

    ![ESTA ES LA IMAGEN QUE RESULTA DEL CODIGOt](Captura de Pantalla 2021-07-20 a la(s) 12.37.08 p. m..png image url)

    ESTO ES LO QUE BUSCO

    ![alt text](Captura de Pantalla 2021-07-20 a la(s) 12.19.02 p. m..png image url)



  • SOLVED, CODE BELOW, I WAS THINKING VERY BAD

    import QtQuick 2.5
    import QtQuick.Controls 1.4
    import QtQuick.Layouts 1.1
    
    ApplicationWindow {
        visible: true
        width: 480
        height: 480
        title: qsTr("Hello World")
    
    
        GridLayout {
            anchors.fill: parent
    
            columns: 3
            rows: 3
    
    
            Rectangle {
                Layout.column: 1
                Layout.columnSpan: 2
    
                Layout.preferredWidth: 2   // 2 of 5 cols
                Layout.fillHeight: true
                Layout.fillWidth: true
    
                color: "green"
            }
    
            Rectangle {
    
                Layout.row: 1
                Layout.columnSpan: 3
    
                Layout.rowSpan: 2
                Layout.preferredWidth: 3
                Layout.preferredHeight: 2
                Layout.fillHeight: true
                Layout.fillWidth: true
    
                color: "blue"
            }
        }
    
    
    

    ![IMAGEN Captura de Pantalla 2021-07-21 a la(s) 5.45.39 p. m..png ](imag/Users/jairoramos/Desktop/Captura de Pantalla 2021-07-21 a la(s) 5.45.39 p. m..pnge url)


Log in to reply