QML

Question

我在 linux

上使用 qtcreator 4.4.1 和 qt 5.9.2-1

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

我已经尝试添加各种彩色矩形以查看是否可以以某种方式将其带到表面，但它从未显示...而且我还在大多数组件上添加了 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 但那也不起作用。

看起来像这样

Answer 1

尝试删除 TabButton 中的 width。

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

当它尝试对此进行布局时，显然失败了。同样的道理，如果你设置所有这些，例如到 width = parent.width / 2 因为父级的宽度由子级的宽度决定。

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

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 详细解释：

This import allows multiple modules which provide conflicting type names to be imported at the same time, however since each usage of a type provided by a module which was imported into a qualified namespace must be preceded by the qualifier, the conflict is able to be resolved unambiguously by the QML engine.

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

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

QML - How do I make the TabButtons in TabBar visible?

qt5

qtquick2

qtquickcontrols2

qt5.9