为什么在此示例中，我的自定义 TabBar 会丢失其内容子项？

Question

我正在尝试创建一个塔巴尔（Tabbar）的预览图片的图像。但是，在添加了几个选项卡之后（确切的数字取决于选项卡中的元素数量）QML引发错误，而PreviewTabbar失去了所有内容的孩子。

以下是一个最小的工作示例：

我的main.qml：

import QtQuick 2.8
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3
ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    StackLayout {
        id: swipeView
        anchors.fill: parent
        currentIndex: tabBar.currentIndex
    }
    Timer {
        interval: 50; running: true; repeat: true
        onTriggered: addTab()
    }
    function addTab() {
        console.log("add Tab")
        var component = Qt.createComponent("qrc:/TabContent.qml")
        if(component.status !== Component.Ready)
            console.log("component not ready")
        var item = component.createObject(swipeView)
        tabBar.addTab(item)
        tabBar.currentIndex = tabBar.contentChildren.length - 1
        console.log("current index " + tabBar.currentIndex)
    }

    header: PreviewTabBar {
        id: tabBar
        currentIndex: swipeView.currentIndex
    }
}

previewTabbar.qml包含内容的预览：

import QtQuick 2.8
import QtQuick.Controls 2.1
TabBar {
    signal closeCurrentTab
    clip: true
    background: Rectangle {
        color: "white"
    }
    function addTab(imageSource) {
        var component = Qt.createComponent("PreviewTabButton.qml")
        if(component.status !== Component.Ready)
            console.log("component not ready")
        else {
            var item = component.createObject()
            item.setSource(imageSource)
            addItem(item)
        }
    }
    function closeTab() {
        console.log("closeTab")
        closeCurrentTab()
    }
}

和最后但并非最不重要的是使用ShadereFfectSource呈现预览：

import QtQuick 2.8
import QtQuick.Controls 2.1
TabButton {
    height: 80
    width: 140
    function setSource(source) {
        preview.sourceItem = source
    }
    contentItem: ShaderEffectSource {
        id: preview
    }
}

此示例到我的机器上约80个选项卡，此后，PreviewTabbar失去了所有孩子（不是堆栈）。但是，在现实生活中的示例中，带有更复杂的标签内容，我只能达到大约8个选项卡。我会做什么错？

这是应用程序输出的相关部分：

qml: current index 99
qml: add Tab
file:///usr/lib/qt/qml/QtQuick/Controls.2/TabButton.qml:65: TypeError:     Cannot read property of null
qml: current index 100
qml: add Tab
qml: current index 1

我尝试在此处描述的回调中完成动态组件创建：

http://doc.qt.io/qt-5/qtqml-javascript-dynamicobjectcreation.html#creating-a-compontent-dnancormine

>

但是，Brough没有改进。

这是示例项目的链接：

https://www.file-upload.net/download-12341284/tabtestshader.zip.html

Answer 1

最可能的原因是PreviewTabBar.qml中的第17行，该行读为：

var item = component.createObject()

由于您在 createObject()中没有父母设置的函数，因此garbagecollector倾向于狂野，即使仍然引用了对象。

尽管没有以这种方式记录，但您应该始终通过父对象，以确保其在GC中幸存下来。

一种更稳定的方法是从模型中生成Tabs，并在addTab-功能中添加依次模型条目。

旁边有点注释：每次调用addTab函数之一时，您都会创建一个新组件。你为什么不像

那样声明它

 Component {
     id: myComp1
     ...
 }

并从中创建对象？