QT QML 界面设计教程6——工具栏按钮样式

MyToolButton.qml

import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Controls.impl 2.14
import QtQuick.Templates 2.12 as Template1

Template1.ToolButton {
    id: control

    property color textColor: (control.down || control.checked || control.highlighted || control.hovered) ? "cyan" : "white"
    property color buttonColor: (control.down || control.checked) ? "lightgreen": "transparent"
    //color: control.visualFocus ? control.palette.highlight : control.palette.buttonText

    implicitWidth:60;
    implicitHeight:50;
    //width: 60
    //height: 50
    padding: 0
    leftPadding: 2
    rightPadding: 12
    spacing: 6

    //自定义的MyIconLabel

    contentItem: MyIconLabel {
        text: control.text
        font: control.font
        color: control.textColor
        spacing: control.spacing
        source: control.icon.source
        imageWidth: 45
        imageHeight: 45
    }

    background: Rectangle {
        implicitHeight: 50
        implicitWidth: 60
        color: control.buttonColor
    }

}

调用：

MyToolButton{ text: ""; icon.source: "qrc:/image/scanner/camera1.png" ; ToolTip.visible: hovered;ToolTip.text: qsTr("90 CCW") }