内部带有 TabBar 的自定义 QML Quick 2 控件

Question

我正在 Qt 5.15 中创建自定义 QML Quick 2 TabBar 控件。如果我将一个简单的控件（CustomTabBarSimple.qml）设为

import QtQuick 2.0
import QtQuick.Controls 2.15
TabBar {
}

然后我可以使用它

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

您可以看到我尝试使用default property alias contents: bar.data 将TabButton 放在自定义控件的TabBar 中，但似乎TabBar 不再正确组织按钮并且它们不再更改currentIndex 时点击——可能是因为 data 字段正在覆盖关键元素。

是否可以使用默认别名将TabButton 注入正确的位置？其次，我怎样才能从文档中自己发现这一点？

Answer 1

您的代码有两个问题：

1. 您正在尝试从 TabBar 访问 currentIndex，但您没有在 CustomTabBarSimple 中公开该属性。您可以通过添加以下内容来解决此问题：

property alias currentIndex: bar.currentIndex

1. TabButton 列表不是 TabBar 的直接子级。 TabBar 派生自一个Container，它在contentData 中有一个子对象列表。你可以阅读here。

default property alias contents: bar.contentData