how to make TabBar fill horizontally?

mzimmers

Hi all -

I need to make a tab bar span the width of its parent. Here's my sample code:

import QtQuick
import QtQuick.Controls 2.15
import QtQuick.Controls.Material 2.15
import QtQuick.Layouts 1.15


Window {
    width: 640
    height: 480
    visible: true

    ColumnLayout {
        Layout.fillWidth: true
        TabBar {
            id: bar
            width: parent.width
            Layout.fillWidth: true
            TabButton {
                text: qsTr("red")
            }
            TabButton {
                text: qsTr("green")
            }
            TabButton {
                text: qsTr("blue")
            }
        }

        StackLayout {
            width: parent.width
            currentIndex: bar.currentIndex
            Item {
                Rectangle {
                    height: 100
                    width: 100
                    color: 'red'
                }
            }
            Item {
                Rectangle {
                    height: 100
                    width: 100
                    color: 'green'
                }
            }
            Item {
                Rectangle {
                    height: 100
                    width: 100
                    color: 'blue'
                }
            }
        }
    }
}

And here's what I'm getting:

Can someone see what I'm doing wrong here?

Thanks...

fcarney

@mzimmers said in how to make TabBar fill horizontally?:

ColumnLayout {
Layout.fillWidth: true

Layout only works for Items inside a layout. Window is not a layout. ColumnLayout is not inside a layout.

ColumnLayout {
  width: parent.width

mzimmers

@fcarney OK, that makes sense, and your fix works fine on my minimal test app:
(I added a ToolBar above my TabBar.)

When I try to transfer this to my "real" app, though, I run into some problems:

In my "real" app, I put the ToolBar code in its own file:

ColumnLayout {
    width: parent.width
    TabBar {
        id: bar
        Layout.fillWidth: true
        height: 48
        TabButton {
            text: qsTr("1")
            onClicked: console.log("index is " + bar.currentIndex)
        }
        TabButton {
            text: qsTr("2")
            onClicked: console.log("index is " + bar.currentIndex)
        }
        TabButton {
            text: qsTr("3")
            onClicked: console.log("index is " + bar.currentIndex)
        }
    }

    StackLayout {
        width: parent.width
        ...

So, 1) why am I not getting the desired TabBar height of 48, and 2) how did I happen to define the borders that I'm seeing (not that I don't like them, but they weren't in the test app)?

Thanks...

fcarney

@mzimmers said in how to make TabBar fill horizontally?:

height: 48

Layouts require hints or whatever they are called. There are a bunch defined in Layout

For example:

Layouts.mimimumHeight: 48

The different looking buttons sounds like a style issue. Somewhere you are selecting a particular style in your real app?

mzimmers

So...my app has 3 "rows" (for lack of a better term):

toolbar
tabbar
stack layout

I remember in an earlier post, you said that Layout.* isn't applied directly to a Layout. So, is the minimumHeight property applied to the items in the layout?

BTW: should "Layouts.mimimumHeight" be "Layout.mimimumHeight?"

Thanks...

fcarney

Layout.<whatever> is only used inside Items that are children of some layout type. They direct the parent layout how to treat the child.
https://doc.qt.io/qt-5/qtquicklayouts-index.html