How to hide a TabButton inside TabBar in QML

2
votes

I want to hide a TabButton in a TabBar.

Visible property keep the space for the button. I try to set width to 0/implicitWidth if hidden/visible but it's broke the layout.

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.12

ApplicationWindow {
    visible: true
    width: 640
    height: 480

    header:   TabBar {
        width: parent.width
        TabButton {
            text: qsTr("Home")
        }
        TabButton {
            id: middle
            visible: false
            text: qsTr("Discover")
        }
        TabButton {
            text: qsTr("Activity")
        }
    }

    Button{
        text: "click"
        onClicked: {
            middle.visible = !middle.visible
        }
    }
}

The two remaining tabs should cover all the space.

1
qtqml

1 Answers

0
votes

Someone has deleted his answer, so I post it again.

TabButton {
    id: middle
    text: qsTr("Discover")
    width: visible ? undefined : 0
}

This works on Ubuntu with Qt 5.13.

Unsetting parent of the button also works parent: visible ? bar : null