TabBar not displaying items other than TabButtons

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

mzimmers

@fcarney I tried that, but that re-introduces a problem with that pesky horizontal line. Where is that coming from, anyway? I mean, I know it's part of the tab bar, but is there some property that controls it? I can't find one. I'd just like it to disappear.

fcarney

I would look to see if there is a way to style the TabBar or just use another Item like a ListView to do the same thing. I assume you are feeding the currentIndex into a stack view or something? You might have better control with a ListView.

mzimmers

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

I assume you are feeding the currentIndex into a stack view or something? You might have better control with a ListView.

I will be. The only purpose for the tabs is to alter the contents of the main display. ListViews look like more work. I'll look into styling the TabBar.