QML TabBar 和 TabButton 组件

TabBar 和 TabButton 是 QML 中用于创建选项卡式界面的组件，通常与 SwipeView 或 StackLayout 配合使用，实现内容切换功能。

TabBar 组件

基本属性

属性	类型	默认值	说明
`currentIndex`	int	`0`	当前选中选项卡的索引
`contentItem`	Item	自动创建	包含选项卡按钮的项
`position`	enumeration	`TabBar.Header`	选项卡栏的位置
`spacing`	real	`0`	选项卡之间的间距
`implicitContentWidth`	real	自动计算	隐式内容宽度
`implicitContentHeight`	real	自动计算	隐式内容高度

Position 枚举值

值	说明
`TabBar.Header`	顶部位置（默认）
`TabBar.Footer`	底部位置

TabButton 组件

基本属性

属性	类型	默认值	说明
`text`	string	`""`	选项卡按钮显示的文本
`icon.source`	url	`""`	选项卡按钮的图标
`icon.width`	real	`-1`	图标宽度
`icon.height`	real	`-1`	图标高度
`icon.color`	color	`"transparent"`	图标颜色
`display`	enumeration	`Button.TextBesideIcon`	图标和文本的显示方式
`checked`	bool	`false`	是否选中状态
`autoExclusive`	bool	`true`	是否自动互斥

Display 枚举值

值	说明
`Button.IconOnly`	只显示图标
`Button.TextOnly`	只显示文本
`Button.TextUnderIcon`	文本在图标下方
`Button.TextBesideIcon`	文本在图标旁边

常用方法

TabBar 方法

方法	参数	返回值	说明
`itemAt(index)`	`index`: int	Item	返回指定索引的选项卡按钮
`setCurrentIndex(index)`	`index`: int	-	设置当前选中的选项卡

TabButton 方法

继承自 AbstractButton 的方法：

方法	参数	返回值	说明
`toggle()`	-	-	切换选中状态

常用信号

TabBar 信号

信号	参数	说明
`currentIndexChanged()`	-	当前索引改变时触发

TabButton 信号

继承自 AbstractButton 的信号：

信号	参数	说明
`clicked()`	-	点击时触发
`toggled()`	-	选中状态改变时触发

使用示例

基本选项卡示例

qml

import QtQuick 2.15
import QtQuick.Controls 2.15Column {TabBar {id: tabBarwidth: parent.widthTabButton { text: "首页" }TabButton { text: "发现" }TabButton { text: "消息" }TabButton { text: "我的" }}StackLayout {width: parent.widthheight: 200currentIndex: tabBar.currentIndexItem { Label { text: "首页内容"; anchors.centerIn: parent } }Item { Label { text: "发现内容"; anchors.centerIn: parent } }Item { Label { text: "消息内容"; anchors.centerIn: parent } }Item { Label { text: "我的内容"; anchors.centerIn: parent } }}
}

带图标的选项卡

qml

TabBar {id: tabBarwidth: parent.widthTabButton {text: "首页"icon.source: "home.png"display: Button.TextUnderIcon}TabButton {text: "设置"icon.source: "settings.png"display: Button.TextUnderIcon}
}

自定义样式选项卡

qml

TabBar {id: tabBarwidth: parent.widthbackground: Rectangle {color: "#F5F5F5"}TabButton {text: "首页"background: Rectangle {color: tabBar.currentIndex === 0 ? "#21BE2B" : "transparent"radius: 5}}TabButton {text: "发现"background: Rectangle {color: tabBar.currentIndex === 1 ? "#21BE2B" : "transparent"radius: 5}}
}

与 SwipeView 配合使用

qml

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.15
import QtQuick.Dialogs 1.3
import QtQuick.Layouts 1.15ApplicationWindow {width: 800height: 600visible: truetitle: "demo"Column {anchors.fill: parentTabBar {id: tabBarwidth: parent.widthcurrentIndex: swipeView.currentIndexTabButton { text: "视图1" }TabButton { text: "视图2" }TabButton { text: "视图3" }}SwipeView {id: swipeViewwidth: parent.widthheight: 200currentIndex: tabBar.currentIndexItem { Rectangle { color: "red"; anchors.fill: parent } }Item { Rectangle { color: "green"; anchors.fill: parent } }Item { Rectangle { color: "blue"; anchors.fill: parent } }}}
}

高级用法

动态添加选项卡

qml

Column {Button {text: "添加选项卡"onClicked: {var tab = tabButtonComponent.createObject(tabBar, {text: "标签 " + (tabBar.count + 1)})swipeView.addItem(swipeItemComponent.createObject(swipeView))}}TabBar {id: tabBarwidth: parent.widthproperty int count: 0}SwipeView {id: swipeViewwidth: parent.widthheight: 200currentIndex: tabBar.currentIndex}Component {id: tabButtonComponentTabButton {onClicked: tabBar.currentIndex = indexComponent.onCompleted: tabBar.count++}}Component {id: swipeItemComponentItem {Rectangle {anchors.fill: parentcolor: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)Label {anchors.centerIn: parenttext: "内容 " + (swipeView.count)}}}}
}

可关闭的选项卡

qml

TabBar {id: tabBarwidth: parent.widthRepeater {model: ["首页", "发现", "消息"]delegate: TabButton {text: modelDatarightPadding: closeButton.width + 10Button {id: closeButtonanchors.right: parent.rightanchors.verticalCenter: parent.verticalCenterwidth: 20height: 20text: "×"flat: truevisible: tabBar.count > 1onClicked: {// 这里需要实现关闭逻辑console.log("关闭选项卡:", index)}}}}
}

响应式选项卡

qml

TabBar {id: tabBarwidth: parent.widthTabButton {text: "首页"width: Math.max(100, tabBar.width / 4)}TabButton {text: "发现"width: Math.max(100, tabBar.width / 4)}TabButton {text: "消息"width: Math.max(100, tabBar.width / 4)}TabButton {text: "我的"width: Math.max(100, tabBar.width / 4)}
}