Adding TabButton dynamically to TabBar

[pra7]

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

[pra7]

@LeLev In my question, you can see that TabButton is created in a separate file. So, based on index changed event I need to do some stuff inside doSomething() on all the TabButtons present in the TabBar.

I got the solution by using the Component as below :

in MainForm.Qml

Component {
       id: myTabButton
       MyTabButton {
           Connections {
               target: tabBar
               onCurrentIndexChanged: doSomething()
           }
      }
   }

Button
   {
       id:button
       width:100
       height:100
       anchors.top:parent.top
       text:qStr("Add")
       onClicked{
       // A object out of the component, and adding it to the container
       onClicked: tabBar.addItem(myTabButton.createObject(tabBar /*, { object to set properties }*/))
   }

Thus Whenever an index is changed doSomething function will be called.

[ODБOï]

Hello,

this is one way to do that using Repeater type.

import QtQuick 2.0
import QtQuick.Window 2.2
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

Window {
visible: true
width: 640
height: 480

    Button
    {
        id:button
        width:100
        height:100
        anchors.top:parent.top
        text:"add"//qStr("Add")
        onClicked:{

                tabBtnRepeater.model ++

        }
    }

    TabBar
    {
        id:tabBar
        anchors.top:button.bottom
        width:500
        height:500

        Repeater{
            id: tabBtnRepeater

            model : 0 //

            TabButton{
                width: 100
                text: "Btn n° " + index
            }

        }


    }
}

LA

[pra7]

@LeLev .. Thanks for the answer and Is there any way to get the each TabButton item which is created in Repeater ? .
I need to call some function on the fly in "TabBar" curentIndexChanged event handler ..

[ODБOï]

@pra7

I cant understant what exactly are you trying to do.

in "TabBar" curentIndexChanged event handler i guess you will do some action depending which button is clicked right ?

You can do that by simply adding an 'onClicked' handler on your TabButton like this :

TabButton{
width: 100
text: "Btn n° " + index
onClicked { console.log(index) } // for exemple
}

LA

[ODБOï]

This can help you to access repeater Itemes:
https://stackoverflow.com/questions/13270818/how-to-access-the-properties-of-a-repeaters-children-in-qml

and this, if you want to try an other approche (Dynamic Qml Object creation )
http://doc.qt.io/qt-5/qtqml-javascript-dynamicobjectcreation.html

LA

[ODБOï]

https://forum.qt.io/topic/36501/solved-add-remove-tabs-dynamically/3

[pra7]

@LeLev In my question, you can see that TabButton is created in a separate file. So, based on index changed event I need to do some stuff inside doSomething() on all the TabButtons present in the TabBar.

I got the solution by using the Component as below :

in MainForm.Qml

Component {
       id: myTabButton
       MyTabButton {
           Connections {
               target: tabBar
               onCurrentIndexChanged: doSomething()
           }
      }
   }

Button
   {
       id:button
       width:100
       height:100
       anchors.top:parent.top
       text:qStr("Add")
       onClicked{
       // A object out of the component, and adding it to the container
       onClicked: tabBar.addItem(myTabButton.createObject(tabBar /*, { object to set properties }*/))
   }

Thus Whenever an index is changed doSomething function will be called.

[pra7]

@LeLev Thanks for all your suggestions....

[ODБOï]

You are welcome :)

[ODБOï]

Full version with normal 'TabButton' :

import QtQuick 2.0
import QtQuick.Window 2.2
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

Window {
visible: true
width: 640
height: 480

function doSomething(){
    console.log(tabBar.currentIndex)
}

Component {
       id: myTabButton
       TabButton {
           Connections {
               target: tabBar
               onCurrentIndexChanged: doSomething()
           }
      }
   }


    Button
    {
        id:button
        width:100
        height:100
        anchors.top:parent.top
        text:"add"
        onClicked:{
                tabBar.addItem(myTabButton.createObject(tabBar ))
            
        }
    }

    TabBar
    {
        id:tabBar
        anchors.top:button.bottom
        width:500
        height:500

    }
}

I'm still intrigued by one thing ! why doSomething() is called 2 times ??
LA

[ODБOï]

It is not called 2 times but 'addedButtonNumber' times

if we have 2 btns it is called 2 times
if we have 3, 3 times and so on

LA

[pra7]

@LeLev Yes .. it will be called based on TabBar.Count ...

[Eeli K]

@pra7 createObject may be the best solution for you. As an exercise I tried another way:

import QtQuick 2.6
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.1

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


    ColumnLayout
    {
        Button
        {
            id:button
            text:"add"
            onClicked: {
                control.contentItem.model.append({"text":"x"})
            }
        }
        TabBar
        {
            {
            Layout.fillWidth: true
            id: control

            contentItem: ListView {
                implicitWidth: contentWidth
                implicitHeight: 40

                model: ListModel{}
                delegate: TabButton{text:model.modelData}
                currentIndex: control.currentIndex

                spacing: control.spacing
                orientation: ListView.Horizontal
                boundsBehavior: Flickable.StopAtBounds
                flickableDirection: Flickable.AutoFlickIfNeeded
                snapMode: ListView.SnapToItem

                highlightMoveDuration: 0
                highlightRangeMode: ListView.ApplyRange
                preferredHighlightBegin: 40
                preferredHighlightEnd: width - 40
            }
        }
    }
}

The TabBar code is taken partly from Default style's TabBar.qml to make it look and behave indentically.

[GrecKo]

Simpler alternative, just a Repeater with a ListModel inside TabBar :

import QtQuick 2.0
import QtQuick.Window 2.2
import QtQuick.Controls 2.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480

    ListModel {
        id: tabModel
    }

    TabBar
    {
        Repeater {
            model: tabModel
            TabButton {
                text: model.text + " " + model.index
                onClicked: tabModel.remove(model.index)
            }
        }
    }

    Button
    {
        anchors.centerIn: parent
        text:"add"
        onClicked: tabModel.append({text: "tab"});
    }
}

EDIT: My bad, I didn't saw @LeLev first answer, it's very similar to mine. But I fell compelled to post it cause there's a lot of over complicated code in the following answers.