TabBar QML Type

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

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

属性

• 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 提供了一种基于标签页的导航模型。

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通常填充一组静态的标签按钮，这些按钮作为标签栏的子元素内联定义。此外，还可以在运行时动态添加add 、insert 、move 和remove 项。可通过itemAt()或contentChildren 访问这些项。

当 TabBar 与另一个容器（如SwipeView ）配对时，必须在每个控件的currentIndex 属性之间建立双向绑定。为避免破坏现有绑定，请勿直接设置currentIndex ，而应使用setCurrentIndex() 等方法。有关更多信息，请参阅Managing the Current Index 。

若要在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以及 《Qt Quick Controls 》中的 “自定义 TabBar”、“导航控件”、“容器控件”和“焦点管理”。

属性文档

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

该属性存储内容的高度，用于计算标签栏的总隐式高度。

该属性首次引入于 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）。

另请参阅 Container::contentWidth 。

position : enumeration

此属性用于指定标签栏的位置。

可能的取值：

默认值因样式而异。

另请参阅 ApplicationWindow::header 、ApplicationWindow::footer 、Page::header 以及Page::footer 。

附加属性文档

TabBar.index : int [read-only attached, since QtQuick.Controls 2.3 (Qt 5.10)]

此附加属性保存了TabBar 中每个选项卡按钮的索引。

它附属于TabBar 中的每个标签按钮。

该属性于 QtQuick.Controls 2.3（Qt 5.10）中引入。

TabBar.position : enumeration [read-only attached, since QtQuick.Controls 2.3 (Qt 5.10)]

此附加属性用于指定标签栏的位置。

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

可能的取值：

该属性于 QtQuick.Controls 2.3（Qt 5.10）中引入。

TabBar.tabBar : TabBar [read-only attached, since QtQuick.Controls 2.3 (Qt 5.10)]

此附加属性包含管理该选项卡按钮的选项卡栏。

它被附加到TabBar 的每个选项卡按钮上。

该属性于 QtQuick.Controls 2.3（Qt 5.10）中引入。