当前位置：网站首页>QML控件类型：TabBar

QML控件类型：TabBar

2022-06-28 11:19:00 【友善啊，朋友】

一、描述

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