QML-Button按键的使用

---

前言

将按键的平常使用的场景举例子使用

---

一、按键按下事件

使用排序，创建确认和取消的按键，打印一些日志。效果如下：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.1
import QtQuick.Controls.Styles 1.2
import QtQuick.Layouts 1.2
import QtQuick.Dialogs 1.2

Window {
    id:root
    visible: true
    width: 200
    height: 100
    title: qsTr("按键功能")

    RowLayout{
        Button{
            text: qsTr("确认")
            // 添加按键事件，打印日志
            onClicked: console.log(qsTr("确认按键"))
        }

        Button{
            text: qsTr("取消")
            onClicked: console.log(qsTr("取消按键"))
        }
    }
}

二、按键按下和松开事件

获取每个按键按下的时候和松开的时候的事件，打印出日志。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.1
import QtQuick.Controls.Styles 1.2
import QtQuick.Layouts 1.2
import QtQuick.Dialogs 1.2

Window {
    id:root
    visible: true
    width: 200
    height: 100
    title: qsTr("按键功能")

    RowLayout{
        Button{
            text: qsTr("确认")
            onClicked: console.log(qsTr("=确认按键="))
            onPressed: console.log(qsTr("确认按键-->按下"))
            onReleased: console.log(qsTr("确认按键-->松开"))
        }

        Button{
            text: qsTr("取消")
            onClicked: console.log(qsTr("=取消按键="))
            onPressed: console.log(qsTr("取消按键-->按下"))
            onReleased: console.log(qsTr("取消按键-->松开"))
        }
    }
}

三、按键添加图标

1、添加图标资源

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.1
import QtQuick.Controls.Styles 1.2
import QtQuick.Layouts 1.2
import QtQuick.Dialogs 1.2

Window {
    id:root
    visible: true
    width: 200
    height: 100
    title: qsTr("按键功能")

    RowLayout{
        Button{

             // 图标显示的位置
             //display: AbstractButton.IconOnly       //只显示icon
             //display: AbstractButton.TextOnly        //只显示文字
             //display: AbstractButton.TextUnderIcon  //文字在icon下边
             display: AbstractButton.TextBesideIcon    //文字在icon旁边

             icon.source: "Image/确认.png"
             icon.width:48 //宽度
             icon.height:48 //高度
             icon.color:"transparent" //颜色

            text: qsTr("确认")
            onClicked: console.log(qsTr("=确认按键="))
            onPressed: console.log(qsTr("确认按键-->按下"))
            onReleased: console.log(qsTr("确认按键-->松开"))
        }

        Button{
            icon.source: "Image/取消.png"
            icon.width:48 //宽度
            icon.height:48 //高度
            icon.color:"transparent" //颜色

            text: qsTr("取消")
            onClicked: console.log(qsTr("=取消按键="))
            onPressed: console.log(qsTr("取消按键-->按下"))
            onReleased: console.log(qsTr("取消按键-->松开"))
        }
    }
}