0

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

我正在尝试创建一个带有 stackview 的选项卡栏，以便我可以在不同的选项卡之间切换。但是标签栏中的标签按钮永远不会出现，如果我单击它们应该在的区域，它们也不起作用。

我尝试添加各种彩色矩形，看看是否能以某种方式将其带到表面，但它从未显示出来……而且我还在大多数组件上添加了 visible: true 。我还试图确保所有东西都有宽度和高度。但即便如此，我仍然无法看到它。

这就是它的样子

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 文档给出的简单示例：https ://doc.qt.io/qt-5/qml-qtquick-controls2-tabbar.html#details但这也不起作用。

看起来像这样

4

2 回答 2

0

除了@derM 所说的（我将完全省略widthandheight分配），最后一个导入是一个问题：

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 引擎明确表示。

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

于 2017-10-26T10:04:32.693 回答
0

尝试删除width您TabButton的 s.

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

当它试图布局这个时，它显然失败了。同样，如果您将它们全部设置为，例如，width = parent.width / 2父级的宽度由子级的宽度决定。

您需要设置按钮相对于TabBars 宽度的宽度，通过使用，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
    }
}
于 2017-10-26T09:54:05.650 回答