QT QML 界面设计教程1——按钮样式

MyButton.qml

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

Template1.Button {
    id:control

    
    //checked选中状态，down按下状态，hovered悬停状态
    property color textColor: "white"
    property color backgroundTheme: "#36c588"
    property color backgroundColor: control.down
                                    ? Qt.darker(backgroundTheme)
                                    : (control.hovered||control.highlighted)
                                      ? Qt.lighter(backgroundTheme)
                                      : control.checked
                                        ? backgroundTheme
                                        : backgroundTheme
    property int radius: 0     //背景rect的圆角

    
    implicitWidth: 90
    implicitHeight: 30
    leftPadding: 0
    rightPadding: 5
    spacing:0
    //checkable: true
    font{
        family: "SimSun"
        pixelSize: 30
    }

    //icon.width: 24
    //icon.height: 24

    //按钮中显示的内容
   
    contentItem: Row{
        id:btn_row
        width: control.width
        spacing: control.spacing
        Image {
            id:btn_icon
            anchors{
                verticalCenter: parent.verticalCenter
            }
            source: control.icon.source //借用icon的接口
        }
        Text{
            id:btn_text
            anchors{
                verticalCenter: parent.verticalCenter
            }
            width: btn_icon.width
                   ? btn_row.width-btn_row.spacing-btn_icon.width
                   : btn_row.width
            text: control.text
            color: control.textColor
            renderType: Text.NativeRendering
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            //wrapMode: Text.NoWrap
            elide: Text.ElideRight
            font: control.font
        }
    }

    //背景
    background: Rectangle{
        implicitWidth: control.implicitWidth
        implicitHeight: control.implicitHeight
        radius: control.radius
        //visible: !control.flat || control.down || control.checked || control.highlighted
        color: control.backgroundColor
    }
}

调用：

        MyButton {
            id: logoButton
            anchors.left: parent
            x: -12
            y: -11
            width: 200
            height: 98
            text: qsTr("Mike-sh")
            font.pointSize: 70
            font.family: "Times New Roman"
        /*
        background: Rectangle {
                color: "#1d8836"
                radius: 0
                border.color: "#1d8836"
                border.width: 2
        }
        */

        }