TabBar not displaying items other than TabButtons

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.