Question

我想按一个按钮动态地将tabButton添加到 TabBar 但是我花了很多时间搜索但我没有得到如何添加，下面是我工作的代码on：

MyTabButton.qml

import QtQuick 2.4
import QtQuick.Controls 2.2

Item
{
    property int BtnWidth:0
    property int BtnHeight:0
    property string BtnText: ""
    property bool isChecked : false

    TabButton
    {
        id:tabBtn
        text:BtnText
        width:BtnWidth
        height:BtnHeight

    }
}

MainForm.qml

import QtQuick 2.4
import QtQuick.Controls 2.2

Rectangle
{
    Button
    {
        id:button
        width:100
        height:100
        anchors.top:parent.top
        text:qStr("Add")
        onClicked{
            //How to add logic here to add tab in below tabBar.
        }
    }
    TabBar
    {
        id:tabBar
        anchors.top:button.bottom
        width:500
        height:500
    }
}

Answer 1

示例：

import QtQuick 2.7
import QtQuick.Controls 2.0

ApplicationWindow {
    id: window
    width: 360
    height: 630
    visible: true

    header: TabBar {
        id: tabBar
    }

    Component {
        id: tabButton
        TabButton { }
    }

    Button {
        text: "Add"
        anchors.centerIn: parent
        onClicked: {
            var tab = tabButton.createObject(tabBar, {text: "Tab " + tabBar.count})
            tabBar.addItem(tab)
        }
    }
}

Answer 2

您需要Component之类的TabButton。您的文件MyTabButton.qml不会产生TabButton，而是包含Item的{{1}}，但是如果这样，您的TabButton就不知道该怎么做做。

因此，您的文件需要TabBar作为根元素

// MyTabButton.qml

TabButton

然后在文件中创建要使用它的组件。（例如main.qml）

import QtQuick 2.4
import QtQuick.Controls 2.2
TabButton
{
    id: tabBtn
    // customize as you like
}

Answer 3

TabBar继承Container，其中包含addItem()。

在QML中将TabButton动态添加到TabBar

3 个答案: