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.15

Column {
    TabBar {
        id: tabBar
        width: parent.width
        
        TabButton { text: "首页" }
        TabButton { text: "发现" }
        TabButton { text: "消息" }
        TabButton { text: "我的" }
    }
    
    StackLayout {
        width: parent.width
        height: 200
        currentIndex: tabBar.currentIndex
        
        Item { 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: tabBar
    width: parent.width
    
    TabButton {
        text: "首页"
        icon.source: "home.png"
        display: Button.TextUnderIcon
    }
    
    TabButton {
        text: "设置"
        icon.source: "settings.png"
        display: Button.TextUnderIcon
    }
}

自定义样式选项卡

qml

复制代码

TabBar {
    id: tabBar
    width: parent.width
    
    background: 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.15

ApplicationWindow {
    width: 800
    height: 600
    visible: true
    title: "demo"

    Column {
        anchors.fill: parent
        TabBar {
            id: tabBar
            width: parent.width
            currentIndex: swipeView.currentIndex

            TabButton { text: "视图1" }
            TabButton { text: "视图2" }
            TabButton { text: "视图3" }
        }

        SwipeView {
            id: swipeView
            width: parent.width
            height: 200
            currentIndex: tabBar.currentIndex

            Item { 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: tabBar
        width: parent.width
        property int count: 0
    }
    
    SwipeView {
        id: swipeView
        width: parent.width
        height: 200
        currentIndex: tabBar.currentIndex
    }
    
    Component {
        id: tabButtonComponent
        TabButton {
            onClicked: tabBar.currentIndex = index
            Component.onCompleted: tabBar.count++
        }
    }
    
    Component {
        id: swipeItemComponent
        Item {
            Rectangle {
                anchors.fill: parent
                color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
                Label {
                    anchors.centerIn: parent
                    text: "内容 " + (swipeView.count)
                }
            }
        }
    }
}

可关闭的选项卡

qml

复制代码

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

响应式选项卡

qml

复制代码

TabBar {
    id: tabBar
    width: parent.width
    
    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)
    }
    
    TabButton {
        text: "我的"
        width: Math.max(100, tabBar.width / 4)
    }
}

注意事项

TabBar 通常与 StackLayout 或 SwipeView 配合使用
可以通过 currentIndex 属性同步 TabBar 和内容视图
使用 position 属性可以控制 TabBar 显示在顶部或底部
可以通过自定义 background 和 contentItem 实现复杂的样式
TabButton 继承自 AbstractButton，支持所有按钮的属性和信号