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渲染预览的PreviewButton.qml：

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丢失了所有子项（不是StackLayout）。然而，在具有更复杂的选项卡内容的现实生活中，我只能获得大约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-component-dynamically

然而，这并没有改善。

以下是示例项目的链接：

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

并从中创建对象？

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

1 个答案: