标签栏 QML 类型

允许用户在不同的视图或子任务之间切换。更多信息...

导入声明	import QtQuick.Controls
继承	Container

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

属性

contentHeight : real (自 QtQuick.Controls 2.2 (Qt 5.9) 以来)
contentWidth : real (自 QtQuick.Controls 2.2 (Qt 5.9) 以来)
position : 枚举

附加属性

index : int (自 QtQuick.Controls 2.3 (Qt 5.10) 以来)
position : 枚举 (自 QtQuick.Controls 2.3 (Qt 5.10) 以来)
tabBar : TabBar (自 QtQuick.Controls 2.3 (Qt 5.10) 以来)

详细描述

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 与其他容器，如 SwipeView 配对时，需要在每个控制器的 currentIndex 属性之间建立双向绑定。为此，请避免直接设置 currentIndex，而是使用 setCurrentIndex()，例如。有关更多信息，请参阅管理当前索引。

要执行当 currentIndex 发生更改时的操作，请使用 onCurrentIndexChanged 属性更改信号处理器

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

调整标签栏的尺寸

默认情况下，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，导航控件，容器控件和Qt Quick Controls中的焦点管理。

属性文档

contentHeight : real [since QtQuick.Controls 2.2 (Qt 5.9)]

该属性包含内容高度。它用于计算标签栏的总隐式高度。

注意： 此属性自QtQuick.Controls 2.2 (Qt 5.9)起在TabBar中提供，但在QtQuick.Controls 2.5 (Qt 5.12)中提升为基础类型。

该属性自QtQuick.Controls 2.2 (Qt 5.9)引入。

另请参阅 Container::contentHeight。

contentWidth : real [since QtQuick.Controls 2.2 (Qt 5.9)]

该属性包含内容宽度。它用于计算标签栏的总隐式宽度。

注意： 此属性自QtQuick.Controls 2.2 (Qt 5.9)起在TabBar中提供，但在QtQuick.Controls 2.5 (Qt 5.12)中提升为基础类型。

该属性自QtQuick.Controls 2.2 (Qt 5.9)引入。

另请参阅 Container::contentWidth。

position : enumeration

该属性包含标签栏的位置。

注意： 如果将标签栏分配给ApplicationWindow或Page的标题或页脚，则自动设置适当的位置。

可能值

常量	说明
`TabBar.Header`	标签栏位于顶部，作为窗口或页面标题。
`TabBar.Footer`	标签栏位于底部，作为窗口或页面页脚。

默认值是样式特定的。

另请参阅 ApplicationWindow::header，ApplicationWindow::footer，Page::header和Page::footer。

附加属性文档

TabBar.index : int [只读，since QtQuick.Controls 2.3 (Qt 5.10)]

此附加属性包含TabBar中每个标签按钮的索引。

它附着在每个TabBar的标签按钮上。

该属性自QtQuick.Controls 2.3 (Qt 5.10)引入。

TabBar.position : enumeration [只读，since QtQuick.Controls 2.3 (Qt 5.10)]

此附加属性包含标签栏的位置。

它附着在每个TabBar的标签按钮上。

可能值

常量	说明
`TabBar.Header`	标签栏位于顶部，作为窗口或页面标题。
`TabBar.Footer`	标签栏位于底部，作为窗口或页面页脚。

该属性自QtQuick.Controls 2.3 (Qt 5.10)引入。

TabBar.tabBar : TabBar [只读，since QtQuick.Controls 2.3 (Qt 5.10)]

此附加属性包含管理此标签按钮的标签栏。

它附着在每个TabBar的标签按钮上。

该属性自QtQuick.Controls 2.3 (Qt 5.10)引入。