Quick控件--1.button

1 效果

2 简介

button按键最常用，control2中对button做了固定封装，为了更灵活使用，自定义button组件。

3 控件代码

3.1 SenComBtn.qml

import QtQuick 2.12

Rectangle {
    // my feature
    property string btnMsg: ""
    property string btnText: ""

    property color textColor: "#ff000000"
    property string pressedTextColor: textColor
    property string releaseTextColor: textColor

    property real fontSize: 20

    property string btnColor: "#F3F3F3"
    property string pressedColor: btnColor
    property string releaseColor: btnColor

    property string borderColor: textColor
    property string pressedBorderColor: pressedTextColor

    property alias wrapMode: textId.wrapMode
    property alias elide: textId.elide

    width: 80; height: 40; radius: 15
    color: mouseArea.pressed ? pressedColor : releaseColor
    border.width: 0
    border.color: mouseArea.pressed ? pressedBorderColor : borderColor
    focus: true
    signal clicked()
    // signal clickedWithMsg(String msg)
    signal pressed()
    signal release()

    Text {
        id: textId
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
        wrapMode: Text.WordWrap
        text: btnText
        color: mouseArea.pressed ? pressedTextColor : releaseTextColor
        font.pixelSize: fontSize
    }
    MouseArea {
        id: mouseArea
        hoverEnabled: true
        anchors.fill: parent
        onClicked: {
            parent.clicked()
            // parent.clickedWithMsg(btnMsg)
        }
        onPressed: {
            parent.pressed(btnMsg)
        }
        onReleased: {
            parent.release()
        }
    }
}

3.2 main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import "./common" as SenCom

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    SenCom.SenComBtn {
        id: fileBtn
        anchors.centerIn: parent
        btnText: "Sen"
        pressedColor: "lightgray"
    }
}