Qt widget使用QML自定义导航栏

具体方法：

https://www.cnblogs.com/judes/p/11359243.html

qml：

import QtQuick 2.0
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.3
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick 2.7
Item {
    signal clickIndex(int index)

    Rectangle {
        id: tab_btn
        width: 80
        height: parent.height
        color: "black"
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#292929" }
            GradientStop { position: 1.0; color: "#828282" }
        }

        Column {
            id: colomn_btn
            anchors.fill: parent
            spacing: 0
            Rectangle {
                id:btn_1
                width: parent.width
                height: width
                color: "gray"
                Text {
                    id: text_1_1
                    anchors.centerIn: parent
                    color:"white"
                    font.family: "FontAwesome"
                    text: "\uf037"
                    font.pixelSize: 20
                }
                Text {
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.top: text_1_1.bottom
                    anchors.topMargin: 4
                    color:"white"
                    text: "汇总界面"
                    font.pixelSize: 13
                }
                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
                    onClicked: {
                        clickIndex(0)
                        btn_1.color="#899dc6"
                        btn_2.color="gray"
                        btn_3.color="gray"
                        btn_4.color="gray"
                        btn_5.color="gray"
                        btn_6.color="gray"
                    }
                    onPressed: {
                        text_1_1.color="black"
                    }
                    onReleased: {
                        text_1_1.color="white"
                    }
                    onEntered: {
                        if(parent.color!="#899dc6")
                        {
                            parent.color="#c3c4c6"
                        }
                    }
                    onExited: {
                        if(parent.color!="#899dc6")
                        {
                            parent.color="gray"
                        }
                    }
                }
            }
            Rectangle {
                id:btn_2
                width: parent.width
                height: width
                color: "gray"
                Text {
                    id: text_2_1
                    anchors.centerIn: parent
                    color:"white"
                    font.family: "FontAwesome"
                    text: "\uf037"
                    font.pixelSize: 20
                }
                Text {
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.top: text_2_1.bottom
                    anchors.topMargin: 4
                    color:"white"
                    text: "状态监测"
                    font.pixelSize: 13
                }
                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
                    onClicked: {
                        clickIndex(1)
                        btn_1.color="gray"
                        btn_2.color="#899dc6"
                        btn_3.color="gray"
                        btn_4.color="gray"
                        btn_5.color="gray"
                        btn_6.color="gray"
                    }
                    onPressed: {
                        text_2_1.color="black"
                    }
                    onReleased: {
                        text_2_1.color="white"
                    }
                    onEntered: {
                        if(parent.color!="#899dc6")
                        {
                            parent.color="#c3c4c6"
                        }
                    }
                    onExited: {
                        if(parent.color!="#899dc6")
                        {
                            parent.color="gray"
                        }
                    }
                }
            }
            Rectangle {
                id:btn_3
                width: parent.width
                height: width
                color: "gray"
                Text {
                    id: text_3_1
                    anchors.centerIn: parent
                    color:"white"
                    font.family: "FontAwesome"
                    text: "\uf037"
                    font.pixelSize: 20
                }
                Text {
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.top: text_3_1.bottom
                    anchors.topMargin: 4
                    color:"white"
                    text: "故障诊断"
                    font.pixelSize: 13
                }
                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
                    onClicked: {
                        clickIndex(2)
                        btn_1.color="gray"
                        btn_2.color="gray"
                        btn_3.color="#899dc6"
                        btn_4.color="gray"
                        btn_5.color="gray"
                        btn_6.color="gray"
                    }
                    onPressed: {
                        text_3_1.color="black"
                    }
                    onReleased: {
                        text_3_1.color="white"
                    }
                    onEntered: {
                        if(parent.color!="#899dc6")
                        {
                            parent.color="#c3c4c6"
                        }
                    }
                    onExited: {
                        if(parent.color!="#899dc6")
                        {
                            parent.color="gray"
                        }
                    }
                }
            }
            Rectangle {
                id:btn_4
                width: parent.width
                height: width
                color: "gray"
                Text {
                    id: text_4_1
                    anchors.centerIn: parent
                    color:"white"
                    font.family: "FontAwesome"
                    text: "\uf037"
                    font.pixelSize: 20
                }
                Text {
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.top: text_4_1.bottom
                    anchors.topMargin: 4
                    color:"white"
                    text: "性能评估"
                    font.pixelSize: 13
                }
                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
                    onClicked: {
                        clickIndex(3)
                        btn_1.color="gray"
                        btn_2.color="gray"
                        btn_3.color="gray"
                        btn_4.color="#899dc6"
                        btn_5.color="gray"
                        btn_6.color="gray"
                    }
                    onPressed: {
                        text_4_1.color="black"
                    }
                    onReleased: {
                        text_4_1.color="white"
                    }
                    onEntered: {
                        if(parent.color!="#899dc6")
                        {
                            parent.color="#c3c4c6"
                        }
                    }
                    onExited: {
                        if(parent.color!="#899dc6")
                        {
                            parent.color="gray"
                        }
                    }
                }
            }
            Rectangle {
                id:btn_5
                width: parent.width
                height: width
                color: "gray"
                Text {
                    id: text_5_1
                    anchors.centerIn: parent
                    color:"white"
                    font.family: "FontAwesome"
                    text: "\uf037"
                    font.pixelSize: 20
                }
                Text {
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.top: text_5_1.bottom
                    anchors.topMargin: 4
                    color:"white"
                    text: "状态预测"
                    font.pixelSize: 13
                }
                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
                    onClicked: {
                        clickIndex(4)
                        btn_1.color="gray"
                        btn_2.color="gray"
                        btn_3.color="gray"
                        btn_4.color="gray"
                        btn_5.color="#899dc6"
                        btn_6.color="gray"
                    }

                    onPressed: {
                        text_5_1.color="black"
                    }
                    onReleased: {
                        text_5_1.color="white"
                    }
                    onEntered: {
                        if(parent.color!="#899dc6")
                        {
                            parent.color="#c3c4c6"
                        }
                    }
                    onExited: {
                        if(parent.color!="#899dc6")
                        {
                            parent.color="gray"
                        }
                    }
                }
            }
            Rectangle {
                id:btn_6
                width: parent.width
                height: width
                color: "gray"
                Text {
                    id: text_6_1
                    anchors.centerIn: parent
                    color:"white"
                    font.family: "FontAwesome"
                    text: "\uf037"
                    font.pixelSize: 20
                }
                Text {
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.top: text_6_1.bottom
                    anchors.topMargin: 4
                    color:"white"
                    text: "保障决策"
                    font.pixelSize: 13
                }
                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
                    onClicked: {
                        clickIndex(5)
                        btn_1.color="gray"
                        btn_2.color="gray"
                        btn_3.color="gray"
                        btn_4.color="gray"
                        btn_5.color="gray"
                        btn_6.color="#899dc6"
                    }
                    onPressed: {
                        text_6_1.color="black"
                    }
                    onReleased: {
                        text_6_1.color="white"
                    }
                    onEntered: {
                        if(btn_6.color!="#899dc6")
                        {
                            btn_6.color="#c3c4c6"
                        }
                    }
                    onExited: {
                        if(btn_6.color!="#899dc6")
                        {
                            btn_6.color="gray"
                        }
                    }
                }
            }
        }
    }
}