QML - Как сделать видимыми кнопки TabButtons в TabBar?

Я использую qtcreator 4.4.1 с qt 5.9.2-1 в Linux

Я пытаюсь создать панель вкладок с просмотром стека, чтобы я мог переключаться между разными вкладками. Но кнопки вкладок на панели вкладок никогда не отображаются, и они также не работают, если я щелкаю область, где они должны были быть.

Я пробовал добавлять всевозможные цветные прямоугольники, чтобы посмотреть, смогу ли я каким-то образом вывести его на поверхность, но он никогда не отображается ... И я также добавил 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 docs: https://doc.qt.io/qt-5/qml-qtquick-controls2-tabbar.html#details, но это тоже не сработало.

Это похоже на это


qml qtquick2 qt5 qtquickcontrols2 qt5.9
person Master Horse    schedule 26.10.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

В дополнение к тому, что сказал @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.

В вашем примере похоже, что вы вообще не используете шаблоны, поэтому вы можете просто удалить импорт.

person Mitch    schedule 26.10.2017
comment
Спасибо за указание на это. Поскольку я только что скопировал текст кода для быстрой проверки, это ускользнуло от моего внимания. - person derM; 26.10.2017
comment
Ах, в этом есть смысл. Так что причина, по которой я не вижу TabButtons, заключается в том, что я еще не реализовал их дизайн. - person Master Horse; 27.10.2017
comment
Я стремлюсь к индивидуальному стилю своего пользовательского интерфейса, поэтому я полагаю, что использование шаблонов - мой лучший выбор. Хотел бы я раньше знать, что элементы управления и шаблоны - это почти одно и то же, только один из них невидим. - person Master Horse; 27.10.2017

arrow_upward
0
arrow_downward

Попробуйте удалить width в своем TabButtons.

Проблема вроде бы в динамическом изменении размеров кнопок. Вы устанавливаете их одинаковыми width с панелью вкладок. Таким образом, каждая кнопка сама по себе заполняет всю полосу.

Когда он пытается это разложить, он явно терпит неудачу. То же самое, если вы установите их все, например to 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
    }
}
person derM    schedule 26.10.2017
comment
Хорошо, я буду иметь это в виду, пока буду реализовывать остальную часть пользовательского интерфейса :) - person Master Horse; 27.10.2017