具体方法：
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"
}
}
}
}
}
}
}