Adding dynamically to qml tabbar and stacklayout - qt

Question

I'm trying to create a tabbed pages in qml. I used TabBar associated with StackLayout:
TabBar {
id: bar
width: parent.width
TabButton {
text: qsTr("Home")
}
TabButton {
text: qsTr("Discover")
}
TabButton {
text: qsTr("Activity")
}
}
StackLayout {
width: parent.width
currentIndex: bar.currentIndex
Item {
id: homeTab
}
Item {
id: discoverTab
}
Item {
id: activityTab
}
}
A new tabButton can be easily added by this code dynamically:
var tab = tabButton.createObject(TTabButton, {text: tabName});
bar.addItem(tab);
which TTabButton is a separate file consisting TabButton item. But I can't find any ways to add a new page to StackLayout. It seems it is supposed to be static. So my question is how to have dynamic tab-paged in qml?

Answer 1

You can add to the children of StackLayout:
var item = stackItem.createObject(null, {id: "tabName"})
layout.children.push(item)
Where stackItem is the Component of those items you add to your StackLayout layout.

Answer 2

You can manipulate the children (or data) property of the StackLayout directly as suggested, but potentially a better idea is to use a Repeater in conjunction with an ObjectModel:
StackLayout
{
id: stackLayout
currentIndex: bar.currentIndex
Repeater
{
model: ObjectModel
{
id: container
}
}
}
This way you get the much richer and easier API of ObjectModel:
let tabPage = tabPageComponent.createObject(stackLayout);
container.append(tabPage);
let tabPage2 = tabPageComponent.createObject(stackLayout);
container.insert(0, tabPage2);
container.move(1, 0);
// etc.
One important detail here is that when removing a tab, it's necessary to manually destroy() it, since the Repeater/ObjectModel only manages the hierarchy, not lifetime.
let tabPage = container.get(0);
container.remove(0);
tabPage.destroy();