Adding dynamically to qml tabbar and stacklayout

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?

Lasall Lasall · Accepted Answer · 2019-08-01T10:00:55

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.

Adding dynamically to qml tabbar and stacklayout

1 Answers