Qt 内置TabBar的自定义QML Quick 2控件

我正在Qt5.15中创建一个定制的QML Quick 2 TabBar控件。如果我将一个简单控件（CustomTabBarSimple.qml）设置为

然后我就可以用它了

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Window {
    visible: true
    width: 640; height: 480
    color:"silver"

    CustomTabBarSimple
    {
        id:bar
        TabButton { text:"Button1" }
        TabButton { text:"Button2" }
    }

    StackLayout {
        anchors.top: bar.bottom
        currentIndex: bar.currentIndex
        Text {text: "First Stack"}
        Text {text: "Second Stack"}
    }
}

但是，如果我将TabBar包装在另一个控件中，则不再是函数：

import QtQuick 2.0
import QtQuick.Controls 2.15

Rectangle
{
    default property alias contents: bar.data

    width: 300; height:50
    color: "red"

    TabBar {
        id: bar
    }
}

您可以看到，我尝试使用

默认属性别名内容：bar.data

将

选项卡按钮

放在自定义控件的

选项卡栏

中，但似乎

选项卡栏

不再正确组织按钮，而且单击时它们也不再更改

当前索引

——可能是因为

数据

字段正在覆盖关键元素

---

是否可以使用默认别名将

TabButton

插入正确的位置？其次，我如何从文档中自己发现这一点？

您的代码有两个问题：

您试图从选项卡栏访问

currentIndex

，但没有在CustomTabBarSimple中公开该属性。您可以通过添加以下内容来解决此问题：

选项卡按钮列表不是选项卡栏的直接子级。TabBar是从容器派生的，该容器在

contentData

中有一系列子对象。你可以读一下

---

如果在

id:bar

之后添加

anchors.fill:parent

会发生什么情况？这是正确的。然而，从文档链接中不清楚这是否会起作用。您/我们如何在不需要专家输入的情况下知道这是真的？当然，在容器中替换列表直到成功是不可接受的？是的，文档并没有描述每一个细节或用例。但是Qt也是开源的。在找到文档之前，我在源代码中找到了这个答案。

import QtQuick 2.0
import QtQuick.Controls 2.15

Rectangle
{
    default property alias contents: bar.data

    width: 300; height:50
    color: "red"

    TabBar {
        id: bar
    }
}

property alias currentIndex: bar.currentIndex

default property alias contents: bar.contentData