qtqmlqtquick2qtquickcontrolsqtquickcontrols2

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

Solution

  • 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 }*/))
        }
    }