Тип QML TabBar

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

• Список всех членов, включая унаследованные

Свойства

• contentHeight : real
• contentWidth : real
• position : перечисление

Подробное описание

TabBar предоставляет модель навигации на основе вкладок.

TabBar заполняется элементами управления TabButton и может использоваться совместно с любым элементом макета или контейнера, предоставляющим свойство currentIndex, например, StackLayout или SwipeView

TabBar {
    id: bar
    width: parent.width
    TabButton {
        text: qsTr("Home")
    }
    TabButton {
        text: qsTr("Discover")
    }
    TabButton {
        text: qsTr("Activity")
    }
}

StackLayout {
    width: parent.width
    currentIndex: bar.currentIndex
    Item {
        id: homeTab
    }
    Item {
        id: discoverTab
    }
    Item {
        id: activityTab
    }
}

Как показано выше, TabBar обычно заполняется статическим набором кнопок вкладок, которые определены как дочерние элементы вкладки. Также возможно динамически добавлять, вставлять, перемещать и удалять элементы во время выполнения. К элементам можно получить доступ с помощью itemAt() или contentChildren.

Изменение размера вкладок

По умолчанию TabBar изменяет размер своих кнопок в соответствии с шириной элемента управления. Доступное пространство распределяется равномерно между каждой кнопкой. Поведение изменения размера по умолчанию можно переопределить, задав явную ширину для кнопок.

Следующий пример демонстрирует, как сохранить неявный размер каждой кнопки вкладки вместо изменения размера в соответствии с шириной вкладки:

TabBar {
    width: parent.width
    TabButton {
        text: "First"
        width: implicitWidth
    }
    TabButton {
        text: "Second"
        width: implicitWidth
    }
    TabButton {
        text: "Third"
        width: implicitWidth
    }
}

Прокручиваемые вкладки

Если общая ширина кнопок превышает доступную ширину вкладки, она автоматически становится прокручиваемой.

TabBar {
    id: bar
    width: parent.width

    Repeater {
        model: ["First", "Second", "Third", "Fourth", "Fifth"]

        TabButton {
            text: modelData
            width: Math.max(100, bar.width / 5)
        }
    }
}

См. также TabButton, Настройка TabBar, Элементы управления навигацией и Элементы управления контейнерами.

Документация по свойствам

contentHeight : real

Это свойство содержит высоту содержимого. Оно используется для вычисления общей неявной высоты вкладки.

Если не задано явно, высота содержимого вычисляется автоматически на основе максимальной неявной высоты вкладок.

Это свойство QML было введено в QtQuick.Controls 2.2 (Qt 5.9).

См. также contentWidth.

contentWidth : real

Это свойство содержит ширину содержимого. Оно используется для вычисления общей неявной ширины вкладки.

Если не задано явно, ширина содержимого вычисляется автоматически на основе общей неявной ширины вкладок и отступа spacing вкладки.

Это свойство QML было введено в QtQuick.Controls 2.2 (Qt 5.9).

См. также contentHeight.

position : перечисление

Это свойство определяет положение вкладки.

Примечание: Если вкладка задана как заголовок или подвал для ApplicationWindow или Page, соответствующее положение устанавливается автоматически.

Возможные значения:

Значение по умолчанию зависит от стиля.

См. также ApplicationWindow::header, ApplicationWindow::footer, Page::header и Page::footer.