Question

我创建了一个Qt空应用程序，其中qml代码如下。

我想做的是我点击按钮“添加标签”并创建标签和对应的页面。但是，如果我删除（单击“删除”选项卡），则不会完全删除！如果我单击“添加Tab2”按钮，它应该会出现在第二页。

如何解决？

main.qml：

import QtQuick 2.7
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.3
import QtQuick.Window 2.3

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Button{
        id:createButton
        text:"add Tab"
        onClicked: { newTab(1) }
        anchors.right: parent.right
        anchors.bottom: parent.bottom
    }

    Button{
        text:"remove Tab"
        onClicked: { closeTab() }
        anchors.right: createButton.left
        anchors.bottom: parent.bottom
    }

    Button{
        id:createButton2
        text:"add Tab2"
        onClicked: { newTab(2) }
        anchors.left: parent.left
        anchors.bottom: parent.bottom
    }

    function newTab (val) {
        var c = Qt.createComponent("Panel_"+val+".qml")
        var tab1 = c.createObject(content)
        tabBar.addItem(tabButton.createObject(tabBar, {text: "teste", "font.pixelSize": 14} ))
    }

    function closeTab(){
        var _contentData = tabBar.contentData
        for (var i = 0; i < _contentData.length; ++i)
        {
            if( _contentData[i]['contentItem']['text']==="teste"){
                    var _removeItem = tabBar.itemAt(i);
                    tabBar.removeItem(_removeItem);
            }
        }
        tabBar.setCurrentIndex(0)
    }


    header: TabBar {
        id: tabBar
        opacity:0.8
    }

    Component {
        id: tabButton
        TabButton {
            font.pixelSize: 14
        }
    }

    StackLayout {
        id: content
        currentIndex: tabBar.currentIndex
        anchors.fill: parent
    }


}

Panel_1.qml

import QtQuick 2.0

Item {
        property string title: qsTr("panel1")
    Text{text:"panel1"}    
}

Panel_2 qml与Panel_1相同。

Answer 1

您已从TabButton中删除了相应的项目，但未从StackLayout中删除相应的项目，因此必须删除具有相同索引的子项，但是当您从列表中删除项目时，必须从头到尾进行迭代

function closeTab(){
    var _contentData = tabBar.contentData
    for (var i = _contentData.length -1 ; i >= 0; --i)
    {
        if( _contentData[i]['contentItem']['text']==="teste"){
            var _removeItem = tabBar.itemAt(i);
            tabBar.removeItem(_removeItem);
            content.children[i].destroy()
        }
    }
    tabBar.setCurrentIndex(0)
}

如何删除与TabBar中的tabButton关联的stackLayout

1 个答案: