一、描述

TabBar 继承自 Container。提供了一个基于标签的导航模型。允许用户在不同的视图或子任务之间切换。

TabBar 填充了 TabButton 控件，可以与任何提供 currentIndex 属性的布局或容器控件一起使用，例如 StackLayout 或 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 通常填充有一组静态选项卡按钮，这些按钮被内联定义为 TabBar 的子项。

1.1、调整标签大小

默认情况下，TabBar 会调整其按钮的大小以适应控件的宽度，可用空间平均分配给每个按钮。可以通过为按钮设置显式宽度来覆盖默认的调整大小行为。

以下示例说明了如何将每个选项卡按钮保持在其隐式大小，而不是调整大小以适应选项卡栏：

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、轻弹标签

如果按钮的总宽度超过标签栏的可用宽度，它会自动变为可轻弹的。

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
        }
    }
}

 

二、属性成员

1、contentHeight : real / contentWidth : real

内容高度 / 宽度。用于计算 TabBar 的总隐式高度 / 宽度。

2、position : enumeration

TabBar 的位置。默认值是特定于样式的。

• TabBar.Header：顶部，作为窗口或页面标题。
• TabBar.Footer：底部，作为窗口或页面页脚。

如果 TabBar 被指定为 ApplicationWindow 或 Page 的页眉或页脚，则会自动设置适当的位置。

三、附加属性成员

1、【只读】TabBar.index : int

 TabBar 中每个 TabButton 的索引。它附加到 TabBar 的每个 TabButton。

2、【只读】TabBar.position : enumeration

TabBar 的位置。它附加到 TabBar 的每个 TabButton。

3、【只读】TabBar.tabBar : TabBar

管理此 TabButton 的 TabBar 。它附加到 TabBar 的每个 TabButton。