'Adding TabButton dynamically to TabBar in QML

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
    }
}
qtqmlqtquick2qtquickcontrolsqtquickcontrols2


Solution 1:[1]

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)
        }
    }
}

Solution 2:[2]

TabBar inherits Container, which has addItem().

Solution 3:[3]

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))
        }
    }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 jpnurmi
Solution 2 dtech
Solution 3 S At

Related Questions