Qt之Tab效果

最新推荐文章于 2024-06-24 11:32:29 发布

Star_ID

最新推荐文章于 2024-06-24 11:32:29 发布

阅读量463

点赞数 9

分类专栏： Qt/MFC 文章标签： qt 数据库

本文链接：https://blog.csdn.net/Star_ID/article/details/135087840

版权

Qt/MFC 专栏收录该内容

10 篇文章 8 订阅

订阅专栏

使用TabView控件可以实现Tab切换效果，但想自定义该怎么设计呢，这里提供一个思路，利用属性tabIndex实现切换。

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Window {
    id: root
    width: 640
    height: 480
    visible: true
    title: qsTr("Tab Test")

    property int tabIndex: 1

    Item {
        width: 640
        height: 480
        anchors.fill: parent

        Item {
            id: items
            anchors.top: parent.top
            anchors.topMargin: 60
            anchors.left: parent.left
            anchors.leftMargin: 30
            width: parent.width
            height: 360

            Item {
                id: tabBtns
                width: 150
                anchors.left: parent.left
                anchors.top: parent.top

                ColumnLayout {
                    id: toolColumn
                    anchors.fill: parent

                    ToolButton {
                        id: btn1
                        text: qsTr("tab button 1")
                        checked: true
                        width: 100
                        height: 53

                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true
                            cursorShape: Qt.PointingHandCursor
                            onClicked: {
                                tabIndex = 1
                                btn1.checked = true
                                btn2.checked = false
                                btn3.checked = false
                            }
                        }
                    }

                    ToolButton {
                        id: btn2
                        text: qsTr("tab button 2")
                        width: 100
                        height: 53

                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true
                            cursorShape: Qt.PointingHandCursor
                            onClicked: {
                                tabIndex = 2
                                btn1.checked = false
                                btn2.checked = true
                                btn3.checked = false
                            }
                        }
                    }

                    ToolButton {
                        id: btn3
                        text: qsTr("tab button 3")
                        width: 100
                        height: 53

                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true
                            cursorShape: Qt.PointingHandCursor
                            onClicked: {
                                tabIndex = 3
                                btn1.checked = false
                                btn2.checked = false
                                btn3.checked = true
                            }
                        }
                    }
                }
            }

            Item {
                id: tab1
                width: 450
                height: 360
                anchors.top: parent.top
                anchors.left: parent.left
                anchors.leftMargin: 150
                visible: tabIndex === 1

                Rectangle {
                    id: rect1
                    anchors.fill: parent
                    color: "red"
                }

            }

            Item {
                id: tab2
                width: 450
                height: 360
                anchors.top: parent.top
                anchors.left: parent.left
                anchors.leftMargin: 150
                visible: tabIndex === 2

                Rectangle {
                    id: rect2
                    anchors.fill: parent
                    color: "green"
                }

            }

            Item {
                id: tab3
                width: 450
                height: 360
                anchors.top: parent.top
                anchors.left: parent.left
                anchors.leftMargin: 150
                visible: tabIndex === 3

                Rectangle {
                    id: rect3
                    anchors.fill: parent
                    color: "blue"
                }

            }
        }
    }
}