QML教程（八） 工具栏TabBar_qml tabbar

目录

一、工具栏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: "工具"}
    }
}

二、多页面滑动容器 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"
            }
        }
}

三、页面指示器PageIndicator 

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

四、综合示例 

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