TabBar not displaying items other than TabButtons

mzimmers

Hi all -

I'm trying to implement a TabBar that will display a few things other than TabButtons. I'm not getting any errors, but none of the non-TabButton items are showing. For brevity, I've removed most of the code, but here's the layout:

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts

TabBar {
    id: navBar

    contentHeight: 48
    Layout.alignment: Qt.AlignVCenter

    TabButton {}
    TabButton {}
    TabButton {}
    TabButton {}
    Image {}
    Item { // spacer
        Layout.fillHeight: true
        Layout.fillWidth: true
    }
    Text {}
}

The TabButtons are showing up fine, but...nothing else. Any ideas what I'm doing wrong?

Qt 6.4; Windows 10.

Thanks...

fcarney

@mzimmers said in TabBar not displaying items other than TabButtons:

Item {
id: fullWidth

You need to set the width here.

Edit: or use the layout the set the width. There is an expansion flag in Layout for width and height when using layouts.

JoeCFD

I did not test your code. But can not you replace Image with TabButton and add the image to it. Same with Text? You can display text and image on TabButton. If you do not want any button features, simply disable it.

mzimmers

@JoeCFD yeah, I thought of that, and can do it. The spacer still doesn't work, though, so I need another way to right-justify the final few items in the bar.

JoeCFD

https://doc.qt.io/qt-6/qml-qtquick-controls2-tabbar.html
you do not have a layout. It is done outside tabbar.

fcarney

"TabBar is populated with TabButton controls" https://doc.qt.io/qt-5/qml-qtquick-controls2-tabbar.html#details

TabBar is not a general purpose container.

Use a container like RowLayout:

RowLayout{
  TabBar{}
  // other crap: Image, Item, Text, etc
}

mzimmers

@fcarney I've tried that, and it mostly works:

There are only two problems with this now:

I still don't know how to get rid of that dumb horizontal line under the breadth of the tab bar.
Notice how the icons inside the tab bar are smaller than the others? They're all supposed to be the same size. Somehow the TabBar is shrinking them.

fcarney

Ah, lame. Okay, maybe this is better:

Item {
  id: item
  TabBar {
    width: item.width
  } 
  // other crap
  Row{
    anchors.right: item.right
  } 
}

edit: This overlays the TabBar.

The TabButtons are AbstractButtons. So you could make your own version by inheriting TabButton and fixing the image sizes. There should be examples on how to customize those.

mzimmers

@fcarney that's not yielding ideal results:

fcarney

What does your code look like? I am making a lot of assumptions in what I post.

mzimmers

@fcarney
I've created a Navbutton.qml file to hold all my settings to a TabButton:

import QtQuick 2.12
import QtQuick.Controls 2.15

TabButton {
    id: button

    property string buttonIcon: ""
    property string buttonText: "this should not appear"

    width: implicitWidth
    horizontalPadding: 20
    background: Rectangle {
        opacity: 0
    }
    icon {
        source: button.buttonIcon
    }
    text: button.buttonText
}

ignoring the non-tabBar stuff which I've commented out:

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts
//ColumnLayout {
    Item {
        id: fullWidth
        TabBar {
            id: navBar

            property real fontSize: 16

            contentHeight: 48
            width: fullWidth.width
            Layout.alignment: Qt.AlignVCenter
            font.pixelSize: navBar.fontSize

            Navbutton {
                id: homeIcon
                icon.source: "qrc:/icons/Home.png"
                text: "Home"
            }

            Navbutton {
                id: equipmentIcon
                icon.source: "qrc:/icons/Equipment.png"
                text: "Equipment"
            }

            Navbutton {
                id: activityIcon
                icon.source: "qrc:/icons/Activity.png"
                text: "Activity"
            }

            Navbutton {
                id: serviceIcon
                icon.source: "qrc:/icons/Service Mode.png"
                text: "Service"
            }
        }

And if your assumptions include that I'm doing this right, you might want to walk that one back...

fcarney

@mzimmers said in TabBar not displaying items other than TabButtons:

Item {
id: fullWidth

You need to set the width here.

Edit: or use the layout the set the width. There is an expansion flag in Layout for width and height when using layouts.

mzimmers

@fcarney I added this line:

width: parent.width

and it seems to work, but I'd be interested in knowing what you meant by "use the layout the set the width."

My non-ToolBar items aren't vertically centered, despite my Item containing this line:

Layout.alignment: Qt.AlignVCenter

I guess this property doesn't propagate down to the items below. I know there are a few options for remedying this; which in your opinion is the best?

Thanks...

fcarney

What is the height of the Item?

mzimmers

@fcarney

ColumnLayout {
    Item {
        id: fullWidth
        height: 48
        width: parent.width
        Layout.alignment: Qt.AlignVCenter

        TabBar {
            id: navBar
...

fcarney

@mzimmers said in TabBar not displaying items other than TabButtons:

but I'd be interested in knowing what you meant by "use the layout the set the width."

ColumnLayout was commented out. I assume you are going to use a Layout to hold the TabBar? If so then use Layout.fillWidth set to true.

fcarney

@mzimmers said in TabBar not displaying items other than TabButtons:

TabBar {
id: navBar

Use anchors for inside non layout items. anchors.verticalCenter: item.verticalCenter. Yes, it does not propagate.

mzimmers

@fcarney yeah, I've been experimenting with different positioning systems, trying to find the one that works best. Sorry for the confusion.

My object hierarchy is currently like this:

ColumnLayout {
    Item {
        TabBar {
        Row {
            Image {}
            Image {}
            Text {}
        }
    }
}

Can I apply a vertical centering to the Row, or do I have to do it for each item in the Row?

EDIT:

Answered my last question by modifying the Row above:

    Row {
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        ...

I think that will wrap up this thread. I'll post my follow-up questions separately. Thanks for all the help...

fcarney

@mzimmers said in TabBar not displaying items other than TabButtons:

experimenting with different positioning systems

That is the way to learn how QML behaves. Play around with it. I have a git repo dedicated to playing with things in Qt. I just spin up a new project and try things out so I am not cluttering up my work projects. Then I dump these into this scratchpad repo. I can go back and determine how to do something pretty quickly.

mzimmers

@fcarney yeah, I have an empty qml project locally for playing with stuff...not in github, but it achieves mostly the same result.

One last question to sneak in here -- my current hierarchy is this:

ColumnLayout {
    Item {
        TabBar {
            Navbutton {}
            Navbutton {}
            Navbutton {}
            Navbutton {}
        }
        Row {
etc.

How can I get some spacing before my first Navbutton (which is just a TabButton)?

fcarney

@mzimmers said in TabBar not displaying items other than TabButtons:

Item {
TabBar {

 Item {
    id: item
   TabBar {
      anchors.left:  item.left
      anchors.leftMargin: 10