Qt基于Qml实现底部导航栏(TabBar)_qml tabbar 美化

演示效果:

 1.主要使用Tabbar控件实现

2.使用SVG图片进行颜色填充

3.使用QtGraphicalEffects库中的ColorOverlay修改SVG颜色

完整QML源码

BaseTabBar.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtGraphicalEffects 1.12
TabBar {
    property alias myModel: idTabbarModel
    property int lastIndex: 0
    id: idTabbar
    currentIndex: 0
    ListModel {id: idTabbarModel}
    Repeater {
        id: idRepeaterControl
        model: idTabbarModel
        TabButton {
            property alias imageSource: image.source //图像
            property alias textColor: text.color //文本
            height: idTabbar.height
            contentItem:Text{
                id: text
                text: modelText
                font.pixelSize: 24
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignBottom
                color: (model.index === idTabbar.currentIndex) ? modelColorG : modelColor
            }
 
            background:Image{
                id: image
                width: 48
                height: 48
                anchors.horizontalCenter: parent.horizontalCenter
                source: (model.index === idTabbar.currentIndex) ? modelSrcG : modelSrc
                ColorOverlay{
                            anchors.fill: image
                            source: image
                            color: "red"
                        }
 
            }
            //鼠标经过事件处理
            onHoveredChanged: {
                if (model.index !== idTabbar.currentIndex){
                    hovered ? text.color = modelColorG : text.color = modelColor
                    hovered ? image.source = modelSrcG : image.source = modelSrc
                }
            }
            //点击事件处理
            onClicked: {
                idRepeaterControl.itemAt(idTabbar.lastIndex).imageSource = myModel.get(idTabbar.lastIndex).modelSrc;
                idRepeaterControl.itemAt(idTabbar.lastIndex).textColor = modelColor;
                image.source = modelSrcG;
                text.color = modelColorG;
                idTabbar.lastIndex = model.index;
            }
        }
    }
}

main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQuick.Window 2.2
 
ApplicationWindow {
    id: frmWindow
    visible: true
    width: 600
    height: 800
    title: qsTr("Qt基于Qml实现底部导航栏(TabBar)")
 
    footer:Rectangle{
        color:"blue"
        height:80
        BaseTabBar{
        id: bar
        height: 80
        width: parent.width
        anchors.bottom: parent.bottom
        Component.onCompleted: {
            myModel.append({ "modelText": "消息", "modelColor": "red", "modelColorG": "#148014",
                               "modelSrc": "qrc:/images/Chat_MsgRecord.svg", "modelSrcG": "qrc:/images/Chat_MsgRecordG.svg"})
            myModel.append({ "modelText": "联系人", "modelColor": "red", "modelColorG": "#148014",
                               "modelSrc": "qrc:/images/Chat_FriendManager.svg", "modelSrcG": "qrc:/images/Chat_FriendManagerG.svg"})
            myModel.append({ "modelText": "发现", "modelColor": "red", "modelColorG": "#148014",
                               "modelSrc": "qrc:/images/Mobile_Find.svg", "modelSrcG": "qrc:/images/Mobile_FindG.svg"})
            myModel.append({ "modelText": "我", "modelColor": "red", "modelColorG": "#148014",
                               "modelSrc": "qrc:/images/Main_P2PChat.svg", "modelSrcG": "qrc:/images/Main_P2PChatG.svg"})
        }
    }
    }
 
 
    SwipeView {
        id: view
        height: frmWindow.height - 120
        width: parent.width
        currentIndex: bar.currentIndex
        anchors.top: topbar.bottom
 
        Rectangle{
            color:"red"
            Text {
                text: qsTr("消息")
                color:"white"
                font.pixelSize: 30
                anchors.centerIn: parent
            }
        }
        Rectangle{
            color:"green"
            Text {
                text: qsTr("联系人")
                color:"white"
                font.pixelSize: 30
                anchors.centerIn: parent
            }
        }
        Rectangle{
            color:"blue"
            Text {
                text: qsTr("发现")
                color:"white"
                font.pixelSize: 30
                anchors.centerIn: parent
            }
        }
        Rectangle{
            color:"yellow"
            Text {
                text: qsTr("我")
                color:"red"
                font.pixelSize: 30
                anchors.centerIn: parent
            }
        }
    }
}