Question

我在qt 5.9.2-1 linux上使用qtcreator 4.4.1

我正在尝试使用stackview创建一个tabbar，以便我可以在不同的标签之间切换。但是标签栏中的标签按钮从不显示，如果我点击它们应该出现的区域，它们就不起作用。

我已经尝试添加各种彩色矩形，看看我是否能以某种方式将它带到表面，但它从未显示......而且我还添加了可见：大多数组件都是真的。我还试图确保一切都有宽度和高度。但是，我仍然无法看到它。

这就是它的样子

import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Extras 1.4
import QtQuick.Layouts 1.3
import QtQuick.Templates 2.2

ApplicationWindow {
    id: root
    flags: Qt.FramelessWindowHint
    visible: true
    width: 382
    height: 748

    Column {
        id: column1
        width: parent.width
        height: parent.height
        visible: true

        TabBar {
            id: bar
            width: parent.width
            height: 50
            visible: true

            TabButton {
                visible: true
                text: qsTr("Fruit")
                width: parent.width
                height: parent.height
                Rectangle {
                    anchors.fill: parent
                    color: "#ff0000"
                    visible: true
                }
            }
            TabButton {
                visible: true
                text: qsTr("Vegetables")
                width: parent.width
                height: parent.height

                Rectangle {
                    anchors.fill: parent
                    color: "#00ff00"
                    visible: true
                }
            }
            TabButton {
                text: qsTr("Demons")
                width: parent.width
                height: parent.height

                Rectangle {
                    anchors.fill: parent
                    color: "#0000ff"
                    visible: true
                }
            }
        }

        StackLayout {
            width: parent.width
            height: parent.height
            visible: true

            currentIndex: bar.currentIndex
            Item {
                id: fruitTab

                Rectangle {
                    anchors.fill: parent
                    color: "#ff0000"
                    visible: true
                }
            }
            Item {
                id: vegetableTab

                Rectangle {
                    anchors.fill: parent
                    color: "#00ff00"
                    visible: true
                }
            }
            Item {
                id: demonTab

                Rectangle {
                    anchors.fill: parent
                    color: "#0000ff"
                    visible: true
                }
            }
        }
    }
}

我也尝试过qt docs https://doc.qt.io/qt-5/qml-qtquick-controls2-tabbar.html#details给出的简单示例，但这也不起作用。

看起来像这样

Answer 1

尝试删除width中的TabButton。

问题似乎是，按钮的动态调整大小。您将它们设置为与标签栏相同的width。所以每个按钮都会自己填满整个栏。

当它试图布局时，它显然会失败。同样，如果你设置所有这些，例如至width = parent.width / 2，因为父母的宽度由孩子的宽度决定。

您需要使用TabBar设置相对于myTabBarsId.width宽度的按钮宽度，或者您可以将其保留并动态调整大小。

TabBar {
    id: bar
    width: parent.width
    height: 50
    visible: true

    TabButton {
        width: bar.width / 2 // Define width based on the `TabBar` width
        text: qsTr("Fruit")
        height: parent.height
    }
    TabButton {
        text: qsTr("Vegetables")
        height: parent.height
    }
    TabButton {
        text: qsTr("Demons")
        height: parent.height
    }
}

Answer 2

除了@derM所说的内容（我将完全忽略width和height作业），最后一次导入是一个问题：

import QtQuick.Templates 2.2

由于模板和控件具有类型名称的一对一映射，这将导致控件类型被模板中的控件类型遮蔽（因为模板导入是最后的）。

如果您还要导入控件，则应始终将模板导入到自己的命名空间中：

import QtQuick.Templates 2.2 as T

http://doc.qt.io/qt-5/qtqml-syntax-imports.html#import-types详细解释了这一点：

此导入允许同时导入多个提供冲突类型名称的模块，但是由于导入到限定名称空间的模块提供的类型的每次使用必须在限定符之后，因此冲突能够由QML引擎明确解决。

在您的示例中，您似乎根本没有使用模板，因此您只需删除导入。

QML - 如何使TabBar中的TabButtons可见？

2 个答案: