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

spanning button in gridlayout



  • I hate to ask such an amateur question. I have been doing a udemy tutorial on QT and been able to pretty much do what I want so far without much issue. I don't know why I'm having such a hard time with this simple problem with grid layout though.

    I'm wanting to span the middle button of the last 3 buttons(the one with text: Valve 1). I cannot get it to span. The first block of code is the area I'm having a problem with, the second is the main.qml. I've been working on this sense yesterday. I know it's something simple but even after looking at examples I don't know what's missing. I have downloaded the qml book as well. I was super excited to find out about it.

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Layouts 1.3
    import QtQuick.Controls 2.4
    
    GridLayout {
        id: mainScreen
        columns: 6
        anchors.fill: parent
        ///////////////////////////////////
        Button {
            height: 40
            width: 100
            Layout.columnSpan: 2
            text: "All Off"
            Layout.fillWidth: true
        }
        Button {
            height: 40
            width: 100
            Layout.columnSpan: 2
            text: "Add New"
            Layout.fillWidth: true
        }
        Button {
            height: 40
            width: 100
            Layout.columnSpan: 2
            text: "Main"
            Layout.fillWidth: true
        }
        /////////////////////////////////////
        Button {
            height: 40
            icon.source: "icons/baseline_delete_black_18dp.png"
            icon.color: "black"
            Layout.fillWidth: true
            Layout.columnSpan: 1
        }
        Button {
            height: 40
            text: "Valve 1"
            font.family: "ubuntu"
            font.pixelSize: 20
            Layout.fillWidth: true
            Layout.columnSpan: 4
        }
        Button {
            height: 40
            text: "ON"
            font.family: "ubuntu"
            Layout.fillWidth: true
            Layout.columnSpan: 1
        }
        //////////////////////////////////////
    
        Item {
            Layout.fillHeight: true
            Layout.columnSpan: 6
        }
    }
    
    
    

    And here is the main.qml

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Layouts 1.3
    import QtQuick.Controls 2.4
    
    Window {
        visible: true
        width: 300
        //width: mainScreenGridLayout.implicitWidth
        height: 480
        //height: mainScreenGridLayout.implicitHeight
        title: qsTr("Homestead Automation")
    
        Page {
            id: pageId
            anchors.fill: parent
    
            SwipeView {
                id: swipeViewId
                anchors.fill: parent
                currentIndex: tabBarId.currentIndex
    
                Item {
                    id: firstItem
                    Loader {
                        id: pageOneLoader
                        source: "defaultPage.qml"
                        anchors.fill: parent
    
                    }
                }
    
                Item {
                    id: secondItem
                    Loader {
                        id: pageTwoLoader
                        source: "menu.qml"
                        anchors.fill: parent
                    }
                }
            }
    
            footer: TabBar {
                id: tabBarId
                currentIndex: swipeViewId.currentIndex
    
                TabButton {
                   text: "Main"
                }
    
                TabButton {
                    text: "Items"
                }
            }
        }
    }
    

Log in to reply