TabBar QML Type

Allows the user to switch between different views or subtasks. 更多...

• 所有成员列表，包括继承成员

特性

• contentHeight : real (since QtQuick.Controls 2.2 (Qt 5.9))
• contentWidth : real (since QtQuick.Controls 2.2 (Qt 5.9))
• position : enumeration

附加特性

• index : int (since QtQuick.Controls 2.3 (Qt 5.10))
• position : enumeration (since QtQuick.Controls 2.3 (Qt 5.10))
• tabBar : TabBar (since QtQuick.Controls 2.3 (Qt 5.10))

详细描述

TabBar provides a tab-based navigation model.

TabBar is populated with TabButton controls, and can be used together with any layout or container control that provides currentIndex -property, such as StackLayout or 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
    }
}
					

As shown above, TabBar is typically populated with a static set of tab buttons that are defined inline as children of the tab bar. It is also possible to add , insert , move ，和 remove items dynamically at run time. The items can be accessed using itemAt () 或 contentChildren .

When TabBar is paired with another container such as SwipeView , it is necessary to make a two-way binding between the currentIndex property of each control. To do this without breaking bindings, avoid setting currentIndex directly, and instead use setCurrentIndex (), for example. See Managing the Current Index 了解更多信息。

To perform an action when currentIndex changes, use the onCurrentIndexChanged property change signal handler :

onCurrentIndexChanged: {
    print("currentIndex changed to", currentIndex)
    // ...
}
					

Resizing Tabs

By default, TabBar resizes its buttons to fit the width of the control. The available space is distributed equally to each button. The default resizing behavior can be overridden by setting an explicit width for the buttons.

The following example illustrates how to keep each tab button at their implicit size instead of being resized to fit the tabbar: