TabBar not displaying items other than TabButtons

[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.