当前位置：网站首页>QML control type: tabbar

QML control type: tabbar

2022-06-28 11:23:00 【Friendly, friend】

One 、 describe

TabBar Inherited from Container. Provides a label based navigation model . Allow users to switch between different views or subtasks .

TabBar Filled TabButton Control , Can work with any provider currentIndex Property or container control , for example StackLayout or SwipeView.

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    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 Usually populated with a set of static tab buttons , These buttons are defined inline as TabBar Children of .

1.1、 Resize labels

By default ,TabBar Will resize its buttons to fit the width of the control , Free space is allocated equally to each button . You can override the default resizing behavior by setting an explicit width for the button .

The following example shows how to keep each tab button at its implicit size , Instead of resizing to fit the tab bar ：

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    TabBar {
        id: bar
        width: parent.width
        TabButton {
            text: "First"
            width: implicitWidth
        }
        TabButton {
            text: "Second"
            width: implicitWidth
        }
        TabButton {
            text: "Third"
            width: implicitWidth
        }
    }

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

1.2、 Flick the label

If the total width of the button exceeds the available width of the label bar , It will automatically become flickable .

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    TabBar {
        id: bar
        width: parent.width

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

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

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

Two 、 Attribute members

1、contentHeight : real / contentWidth : real

Content height / Width . Used to calculate TabBar Total implicit height of / Width .

2、position : enumeration

TabBar The location of . The default is style specific .
TabBar.Header： Top , As a window or page title .
TabBar.Footer： Bottom , As a window or page footer .
If TabBar Is specified as ApplicationWindow or Page Header or footer of , The appropriate position will be automatically set .