QML: TabBar and StackLayout

mzimmers

Hi all -

I'm trying to use StackLayouts to display various components based on a selected tab. The docs on StackLayout are somewhat brief, but seem clear. But...they're not doing what I expected; might be a misunderstaning on my part.

Am I correct in that the components in the StackLayout can fill the entire area under the tab bar?

Here's my code. You'll notice that the StackLayout isn't a peer of the TabBar, but that doesn't appear to be causing a problem. So, I guess my question is, why am I not getting a big yellow rectangle under the TabBar?

Thanks...

EDIT:

I guess it would help if I actually posted the code snippet:

ColumnLayout {

    Rectangle {
        height: parent.height
        width: parent.width
        Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft

        TabBar {}
        Row  {}
    }

    StackLayout {
        Layout.fillHeight: true
        Layout.fillWidth: true
        Item {
            Rectangle {
                Layout.fillHeight: true
                Layout.fillWidth: true
                color: 'yellow'
            }
		etc.

JoeCFD

https://asitdhal.medium.com/stacklayout-in-qml-2ddeafa09ae5
anchors settings are the keys

mzimmers

@JoeCFD I can't use anchors as coded. I did use Layout fills (as indicated in the code I added) -- shouldn't that suffice?

JoeCFD

@mzimmers what did you get with your layout?

mzimmers

@JoeCFD said in QML: TabBar and StackLayout:

@mzimmers what did you get with your layout?

With my Item Rectangles using the above Layout directives, I get ca-ca. It also blows up my toolbar -- I'm missing some items, and my background color is gone. No error messages, though.

~~When I define the rectangles with fixed height and width, it works OK, but that's not what I want.~~

EDIT:

I misspoke above: the presence of the StackLayout messes with my Rectangle containing the TabBar.

mzimmers

I think I could make this simpler if I can put my TabBar and my StackLayout in separate files. If I do this, though, how do I connect the TabBar currentIndex to my StackLayout?

JoeCFD

id is your friend.

mzimmers

@JoeCFD I figured any answer to this would involve ids, but...

main.qml:

ColumnLayout {
    Navbar {
        id: navBar
    }
    Mainarea {}
    }

Navbar.qml:

ColumnLayout {
    id: fullScreen
    Rectangle {
        id: navBar
        TabBar {
            id: navTabs
etc.

~~How do I get the value of the navTabs.currentIndex so that I can pass it to Mainarea?~~

EDIT:

This last question deserves its own thread. Please disregard. I'm keeping this thread open because I know I'll have more questions.

Thanks...

mzimmers

OK, I got it figured out. As @JoeCFD suggested, I needed anchors instead of Layout.*. Someday, I'll commit this to memory -- @fcarney will probably only have to remind me another 100 times...

Thanks for the help.