QML教程（八）工具栏TabBar

柔光的暖阳◎ 2024-03-30 14:38 89阅读 0赞

**目录**

一、工具栏TabBar、TabButton

二、多页面滑动容器 SwipeView

三、页面指示器PageIndicator

四、综合示例

--------------------

#### 一、工具栏TabBar、TabButton ####

import QtQuick 6.4
    import QtQuick.Controls 6.4
    
    Rectangle {
        width: 720
        height: 640
        TabBar{
            TabButton{text: "文件"}
            TabButton{text: "编辑"}
            TabButton{text: "视图"}
            TabButton{text: "工具"}
        }
    }

![7509d04e29c44de2939dd0f5536abeaf.png][]

#### 二、多页面滑动容器 SwipeView ####

import QtQuick 6.4
    import QtQuick.Controls 6.4
    
    Rectangle {
        width: 452
        height: 638
        SwipeView {
                id: view
                anchors.fill: parent
                //第一页
                Image {
                    id:                 firstPage
                    smooth:             true
                    mipmap:             true
                    antialiasing:       true
                    fillMode:           Image.PreserveAspectFit
                    sourceSize.height:  height
                    source:             "https://img1.doubanio.com/view/photo/l/public/p2717886028.webp"
                }
                //第二页
                Rectangle{
                    id:                 secondPage
                    Rectangle{
                        width:      parent.width
                        height:     parent.height/2
                        color:      'red'
                    }
                    Rectangle{
                        y:          parent.height/2
                        width:      parent.width
                        height:     parent.height/2
                        color:      'yellow'
                    }
                }
                //第三页
                Item{
                    id: thirdPage
                    Button{
                        x:100
                        y:100
                        width:200
                        height:50
                        text:qsTr("OK")
                    }
                }
                //第四页
                Image {
                    id:forthPage
                    smooth:true
                    mipmap:true
                    antialiasing:true
                    fillMode:Image.PreserveAspectFit
                    sourceSize.height:  height
                    source:"https://img1.doubanio.com/view/photo/l/public/p2717883198.webp"
                }
            }
    }

![17236a169f9c43fe922011896236c0ca.png][]

#### 三、页面指示器PageIndicator ####

import QtQuick 6.4
    import QtQuick.Controls 6.4
    
    Rectangle {
        width: 452
        height: 638
        PageIndicator {
                id: indicator
                //页数
                count: 3
                //当前页码
                currentIndex: 0
        }
    }

![6962574293af4e61833774c1a182ced5.png][]

#### 四、综合示例 ####

import QtQuick 6.4
    import QtQuick.Controls 6.4
    
    Rectangle {
        width: 720
        height: 640
        //工具栏，点击或上下左右键切换
        TabBar{
            id:tabBar
            TabButton{text: "文件"}
            TabButton{text: "编辑"}
            TabButton{text: "视图"}
            TabButton{text: "工具"}
        }
    
        // 多页面容器，鼠标或手势滑动切换
        SwipeView{
            id:view
            currentIndex: tabBar.currentIndex
            anchors.fill: parent
            //不要遮住工具栏
            anchors.topMargin: 50
            onCurrentIndexChanged: {
                tabBar.currentIndex=view.currentIndex
                indicator.currentIndex  = currentIndex
            }
            //第一页
            Image {
                id:                 firstPage
                smooth:             true
                mipmap:             true
                antialiasing:       true
                fillMode:           Image.PreserveAspectFit
                sourceSize.height:  height
                source:             "https://img1.doubanio.com/view/photo/l/public/p2717886028.webp"
            }
            //第二页
            Image {
                id:                 secondPage
                smooth:             true
                mipmap:             true
                antialiasing:       true
                fillMode:           Image.PreserveAspectFit
                sourceSize.height:  height
                source:             "https://img1.doubanio.com/view/photo/l/public/p2717883198.webp"
            }
            //第三页
            Image {
                id:                 thirdPage
                smooth:             true
                mipmap:             true
                antialiasing:       true
                fillMode:           Image.PreserveAspectFit
                sourceSize.height:  height
                source:             "https://img2.doubanio.com/view/photo/l/public/p2873948072.webp"
            }
            //第三页
            Image {
                id:                 forthPage
                smooth:             true
                mipmap:             true
                antialiasing:       true
                fillMode:           Image.PreserveAspectFit
                sourceSize.height:  height
                source:             "https://img1.doubanio.com/view/photo/l/public/p2654487577.webp"
            }
        }
        // 底部页面指示器
        PageIndicator {
                id: indicator
                count: view.count
                currentIndex: view.currentIndex
                anchors.bottom: view.bottom
                anchors.horizontalCenter: parent.horizontalCenter
        }
    }

![988a831ec5734d30bcbb113a1a2e66ec.png][]

[7509d04e29c44de2939dd0f5536abeaf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/f88e7e92a2f44a918a3deb954b2eab53.png
[17236a169f9c43fe922011896236c0ca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/64892836e9744fb5927a20b7ac482b26.png
[6962574293af4e61833774c1a182ced5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/7bdafe6807fa424598426d8dc54c6e64.png
[988a831ec5734d30bcbb113a1a2e66ec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/6b55bacc43cb4a939ac1f8cac0cb96af.png