Adding TabButton dynamically to TabBar in QML

Question

I am trying to add a tabButton to TabBar dynamically on pressing a button but i have spent a lot of time searching but i am not getting how to add, below is the code which i am working on :

MyTabButton.qml

import QtQuick 2.4
import QtQuick.Controls 2.2

Item
{
    property int BtnWidth:0
    property int BtnHeight:0
    property string BtnText: ""
    property bool isChecked : false

    TabButton
    {
        id:tabBtn
        text:BtnText
        width:BtnWidth
        height:BtnHeight

    }
}

MainForm.qml

import QtQuick 2.4
import QtQuick.Controls 2.2

Rectangle
{
    Button
    {
        id:button
        width:100
        height:100
        anchors.top:parent.top
        text:qStr("Add")
        onClicked{
            //How to add logic here to add tab in below tabBar.
        }
    }
    TabBar
    {
        id:tabBar
        anchors.top:button.bottom
        width:500
        height:500
    }
}

score 6 · Answer 1 · answered Jul 27 '17 at 11:45

6

Example:

import QtQuick 2.7
import QtQuick.Controls 2.0

ApplicationWindow {
    id: window
    width: 360
    height: 630
    visible: true

    header: TabBar {
        id: tabBar
    }

    Component {
        id: tabButton
        TabButton { }
    }

    Button {
        text: "Add"
        anchors.centerIn: parent
        onClicked: {
            var tab = tabButton.createObject(tabBar, {text: "Tab " + tabBar.count})
            tabBar.addItem(tab)
        }
    }
}

answered Jul 27 '17 at 11:45

jpnurmi

5,716
2
21
37

That's exactly what i need ,But if i want to use a function which is created in **TabButton** say **doSomething()** how to access that in **tabBar** onCurrentIndexChanged() event handler ? – pra7 Jul 27 '17 at 14:02
Take a look at the [`Container`](https://doc.qt.io/qt-5/qml-qtquick-controls2-container.html) API. It provides access to the current item, or any other item if you want. – jpnurmi Jul 27 '17 at 14:51

derM - not here for BOT dreams · Accepted Answer · 2017-07-27T14:12:30.977

You need to have something like a Component that is a TabButton. Your file MyTabButton.qml won't result in a TabButton, but instead an Item containing a TabButton, but with this, your TabBar does not know what to do.

So your file will need to have TabButton as root element

//MyTabButton.qml

import QtQuick 2.4
import QtQuick.Controls 2.2
TabButton
{
    id: tabBtn
    // customize as you like
}

Then you create a Component of this in your file where you want to use it. (e.g. main.qml)

import QtQuick 2.4
import QtQuick.Controls 2.0

ApplicationWindow {
    width: 800
    height: 600
    visible: true

    TabBar {
        id: tabBar
        width: 800
        height: 50
    }

    // The component is like a factory for MyTabButtons now.
    // Use myTabButton.createObject(parent, jsobject-with-property-assignments) to create instances.
    Component {
        id: myTabButton
        MyTabButton {
            /// EDIT ACCORDING TO YOUR COMMENTS ***
            Connections {
                target: tabBar
                onCurrentIndexChanged: doSomething()
            }
            /// EDIT OVER
        }
    }

    Button {
        anchors.centerIn: parent
        // Create a object out of the component, and add it to the container
        onClicked: tabBar.addItem(myTabButton.createObject(tabBar /*, { object to set properties }*/))
    }
}

That's exactly what i need ,But if i want to use a function which is created in **MyTabButton** say **doSomething()** how to access that in **tabBar** onCurrentIndexChanged() event handler ? — pra7, Jul 27 '17 at 14:02
You want to call `doSomething` for all of the `TabButtons` or only of the one that became active? — derM - not here for BOT dreams, Jul 27 '17 at 14:07
I need to call `doSomething` of all the `TabButtons` as I am doing some drawing on the `TabButton` ... — pra7, Jul 27 '17 at 14:09
That sounds strange, but ok. The solution is, you don't access the function from the `onCurrentIndexChanged`-handler, but you create a connection inside the `TabButton` that targets the `TabBar`. See my edit in the code (marked by comments) — derM - not here for BOT dreams, Jul 27 '17 at 14:10

score 0 · Answer 3 · answered Jul 27 '17 at 11:46

0

TabBar inherits Container, which has addItem().

answered Jul 27 '17 at 11:46

dtech

47,916
17
112
190

Thanks and I have referred it already but I want to add a new tabButton on the fly ... – pra7 Jul 27 '17 at 14:12

score 0 · Answer 4 · answered Feb 07 '22 at 17:33

Try it in Window

Row {
    anchors.fill: parent
    TabBar {
        id: tabBar

        currentIndex: 0
        width: parent.width - addButton.width

        TabButton { text: "TabButton" }
    }

    Component {
        id: tabButton
        TabButton { text: "TabButton" }
    }

    Button {
        id: addButton
        text: "+"
        flat: true
        onClicked: {
            tabBar.addItem(tabButton.createObject(tabBar))
            console.log("added:", tabBar.itemAt(tabBar.count - 1))
        }
    }
}

Adding TabButton dynamically to TabBar in QML

4 Answers4