Unsolved 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" } } } }