动态添加到 qml tabbar 和 stacklayout

Question

我正在尝试在 qml 中创建标签页。我使用了与 StackLayout 关联的 TabBar：

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

此代码可以轻松地动态添加一个新的 tabButton：

        var tab = tabButton.createObject(TTabButton, {text: tabName});
        bar.addItem(tab);

其中TTabButton是一个单独的文件，由TabButton项组成。但是我找不到任何方法来向 StackLayout 添加新页面。它似乎应该是静态的。所以我的问题是如何在 qml 中进行动态标签页分页？

Answer 1

您可以添加到 StackLayout 的子项：

var item = stackItem.createObject(null, {id: "tabName"})
layout.children.push(item)

其中 stackItem 是您添加到 StackLayout layout 的那些项目的组件。

Answer 2

您可以按照建议直接操作 StackLayout 的 children（或 data）属性，但可能更好的主意是使用 Repeater 结合 ObjectModel:

StackLayout
{
    id: stackLayout
    currentIndex: bar.currentIndex
        
    Repeater
    {
        model: ObjectModel
        {
            id: container
        }
    }
}

通过这种方式，您可以获得比 ObjectModel 更丰富、更轻松的 API:

let tabPage = tabPageComponent.createObject(stackLayout);
container.append(tabPage);

let tabPage2 = tabPageComponent.createObject(stackLayout);
container.insert(0, tabPage2);

container.move(1, 0);
// etc.

这里的一个重要细节是，当删除标签时，有必要手动 destroy() 它，因为 Repeater/ObjectModel 只管理层次结构，而不管理生命周期。

let tabPage = container.get(0);
container.remove(0);
tabPage.destroy();

动态添加到 qml tabbar 和 stacklayout

Adding dynamically to qml tabbar and stacklayout

qt

qml

qt5

qtquick2