Default ColumnLayout Behavior

bockscaracer

I am trying to build an extremely basic prototype application with a tab-based layout using 2 static tabs; nothing programmatic. I've been trying to follow the QML examples but they are not very useful at all since the content fills the parent which covers the tabs in each of the examples I've seen.

I've concluded that I need a traditional Column Layout but the default behavior of the ColumnLayout type is completely baffling to me.

This is my prototype code:

ApplicationWindow {
    title: qsTr("Hello World")
    width: 640
    height: 480
    ColumnLayout {
        TabBar {
            id: bar
            TabButton {
                text: qsTr("Tab01")
            }
            TabButton {
                text: qsTr("Tab02")
            }
        }
        Button {
            text: qsTr("Hello World")
        }
    }
}

One would expect the ColumnLayout to automatically fill the parent window but instead, it defaults some some strange default height & width which leaves my tabs and my buttons confined to a small space at the top left of the window.

My first question is - why on earth is this the default behavior of a column layout? And second is, why do I coax the layout into filling the window as one would expect?

sierdzio

The top-level layout it "just" an item. You have to tell it where it should position itself and how much space it can occupy. Then the contents of the layout will automatically adapt.

So you should specify anchors or at the very least the width and height for your top-level layout.

Then, for lower levels, you can choose whether a control should try to fill the width or height with attached properties: Layout.fillWidth and Layout.fillHeight.

bockscaracer

@sierdzio said in Default ColumnLayout Behavior:

Then the contents of the layout will automatically adapt.

They don't though - that is the problem.

Take the TabBar example. For my use case, I removed the 3rd tab but it is functionally the same:

Item {
    width: 800
    height: 600
    TabBar {
        id: bar
        width: parent.width
        TabButton {
            text: qsTr("Home")
        }
        TabButton {
            text: qsTr("Discover")
        }
    }

    StackLayout {
        width: parent.width
        currentIndex: bar.currentIndex
        Item {
            id: homeTab
        }
        Item {
            id: discoverTab
        }
    }
}

One would think that each item in the StackLayout is the contents of each tab but in this example, StackLayout is sitting on top of the TabBar.

I don't know if the documentation is simply bad or broken but it doesn't explain at all how to set up the tab layout at all, besides just creating the tabs themselves.

For example this:

Item {
    width: 800
    height: 600
    TabBar {
        id: bar
        width: parent.width
        TabButton {
            text: qsTr("Home")
        }
    }

    StackLayout {
        width: parent.width
        currentIndex: bar.currentIndex
        Item {
            id: homeTab
            Button {
                text: 'hello world'
            }
        }
    }
}

Results in the button being literally inside the tab bar; nothing is below it. This is why I thought Layouts instead of Anchors were needed in the first place.

sierdzio

@bockscaracer said in Default ColumnLayout Behavior:

Item {
TabBar {}
StackLayout {

You have put both TabBar and StackLayout inside an item, without anchoring. By default, all items are positioned at (0, 0) point (top left). If you want things to be positioned by a layout, then use a layout :D

ColumnLayout {
  TabBar{}
  StackLayout{}
}