QML - How do I make the TabButtons in TabBar visible?

Question

I'm using qtcreator 4.4.1 with qt 5.9.2-1 on linux

I'm trying to create a tabbar with a stackview so that I can switch between the different tabs. But the tabbuttons in the tabbar never show up, and they aren't functional either if I click the area where they should have been.

I've tried adding all sorts of colored rectangles to see if I could somehow bring it to the surface, but it never shows... And I also added visible: true on most of the components. Also I tried to make sure everything has a width and height. But nonetheless, I still am unable to see it.

This is what it looks like

import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Extras 1.4
import QtQuick.Layouts 1.3
import QtQuick.Templates 2.2

ApplicationWindow {
    id: root
    flags: Qt.FramelessWindowHint
    visible: true
    width: 382
    height: 748

    Column {
        id: column1
        width: parent.width
        height: parent.height
        visible: true

        TabBar {
            id: bar
            width: parent.width
            height: 50
            visible: true

            TabButton {
                visible: true
                text: qsTr("Fruit")
                width: parent.width
                height: parent.height
                Rectangle {
                    anchors.fill: parent
                    color: "#ff0000"
                    visible: true
                }
            }
            TabButton {
                visible: true
                text: qsTr("Vegetables")
                width: parent.width
                height: parent.height

                Rectangle {
                    anchors.fill: parent
                    color: "#00ff00"
                    visible: true
                }
            }
            TabButton {
                text: qsTr("Demons")
                width: parent.width
                height: parent.height

                Rectangle {
                    anchors.fill: parent
                    color: "#0000ff"
                    visible: true
                }
            }
        }

        StackLayout {
            width: parent.width
            height: parent.height
            visible: true

            currentIndex: bar.currentIndex
            Item {
                id: fruitTab

                Rectangle {
                    anchors.fill: parent
                    color: "#ff0000"
                    visible: true
                }
            }
            Item {
                id: vegetableTab

                Rectangle {
                    anchors.fill: parent
                    color: "#00ff00"
                    visible: true
                }
            }
            Item {
                id: demonTab

                Rectangle {
                    anchors.fill: parent
                    color: "#0000ff"
                    visible: true
                }
            }
        }
    }
}

I also tried the simple example given by the qt docs: https://doc.qt.io/qt-5/qml-qtquick-controls2-tabbar.html#details but that didn't work either.

It looks like this

score 0 · Answer 1 · answered Oct 26 '17 at 09:54

Try to remove the width in your TabButtons.

The problem seems to be, the dynamic sizing of the buttons. You set them to be of the same width as the tab bar. So each button would fill the whole bar on its own.

When it tries to layout this, it obviously fails. The same goes, if you set all of them, e.g. to width = parent.width / 2 as the parent's width is determined by the width of the children.

You need to either set the width of the buttons in relation to the TabBars width, by using myTabBarsId.width or you can just leave it out and let it be sized dynamically.

TabBar {
    id: bar
    width: parent.width
    height: 50
    visible: true

    TabButton {
        width: bar.width / 2 // Define width based on the `TabBar` width
        text: qsTr("Fruit")
        height: parent.height
    }
    TabButton {
        text: qsTr("Vegetables")
        height: parent.height
    }
    TabButton {
        text: qsTr("Demons")
        height: parent.height
    }
}

Alright, I will keep that in mind while I am implementing the rest of the UI :) — Master Horse, Oct 26 '17 at 21:10

score 0 · Accepted Answer · answered Oct 26 '17 at 10:04

In addition to what @derM said (I would just leave out the width and height assignments altogether), the last import is a problem:

import QtQuick.Templates 2.2

Since the templates and controls have a one-to-one mapping of type names, this will cause the controls types to be shadowed by the ones from templates (since the templates import comes last).

You should always import the templates into their own namespace if you're also importing the controls:

import QtQuick.Templates 2.2 as T

http://doc.qt.io/qt-5/qtqml-syntax-imports.html#import-types explains this in detail:

This import allows multiple modules which provide conflicting type names to be imported at the same time, however since each usage of a type provided by a module which was imported into a qualified namespace must be preceded by the qualifier, the conflict is able to be resolved unambiguously by the QML engine.

In your example it looks like you're not using the templates at all, so you can just remove the import.

Thanks for pointing this out. As I just copied the body of the code for a quick test, this slipped my attention. — derM - not here for BOT dreams, Oct 26 '17 at 11:16
Ah, that makes sense. So the reason I am not seeing the TabButtons are because I have not implemented their design yet. — Master Horse, Oct 26 '17 at 21:03
I am aiming for a custom style on my UI, so I guess going onward with templates is my best choice. I wish I had known earlier that controls and templates are almost the same thing, only that one of them is invisible. — Master Horse, Oct 26 '17 at 21:07

QML - How do I make the TabButtons in TabBar visible?

2 Answers2