QML动态创建销毁TabBar子项异常问题求助

问题根源 #

1. 误删TabBar内部元素：tabBar.children包含TabBar自身的私有控件（如布局容器、指示器等），直接遍历销毁会破坏TabBar的内部结构，导致后续无法正常添加新的TabButton。
2. 正向遍历删除的索引错乱：删除元素时children.length会动态减少，正向递增索引会跳过部分元素，无法彻底删除所有手动创建的TabButton。

修复方案 #

方案1：使用contentChildren遍历并倒序删除 #

TabBar的contentChildren属性仅包含用户添加的TabButton，避免误删内部元素；同时倒序遍历删除，防止索引错乱。

修改后的代码：

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    width: 300
    height: 200
    visible: true

    TabBar {
        id: tabBar
        anchors.fill: parent
        function addTabButton(filename) {
            Qt.createQmlObject(
                'import QtQuick.Controls 2.15; TabButton { text: "' + filename + '" }',
                tabBar)
        }
    }

    Row {
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter

        Button {
            text: "Add tabs"
            onClicked: { tabBar.addTabButton("Tab 1"); tabBar.addTabButton("Tab 2") }
        }

        Button {
            text: "Remove tabs"
            onClicked: {
                // 倒序遍历contentChildren，避免索引错乱
                for (var i = tabBar.contentChildren.length - 1; i >= 0; i--) {
                    tabBar.contentChildren[i].destroy()
                }
            }
        }
    }
}

方案2：维护数组记录创建的TabButton #

手动维护一个数组存储所有创建的TabButton，删除时遍历数组销毁，更精准可控：

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    width: 300
    height: 200
    visible: true

    // 存储手动创建的TabButton
    property var tabButtons: []

    TabBar {
        id: tabBar
        anchors.fill: parent
        function addTabButton(filename) {
            let tab = Qt.createQmlObject(
                'import QtQuick.Controls 2.15; TabButton { text: "' + filename + '" }',
                tabBar)
            tabButtons.push(tab)
        }
    }

    Row {
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter

        Button {
            text: "Add tabs"
            onClicked: { tabBar.addTabButton("Tab 1"); tabBar.addTabButton("Tab 2") }
        }

        Button {
            text: "Remove tabs"
            onClicked: {
                tabButtons.forEach(tab => tab.destroy())
                tabButtons = [] // 清空数组
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者Fausto01