The Button control can be said to be one of the most commonly used controls. When the user clicks the button, the pressed, released, and clicked signals may be triggered. We can specify corresponding signal processors for it in the qml document to respond to user operations.
Let’s look at a simple Button definition below
————————————————
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3
ApplicationWindow {
width: 640
height: 480
visible: true
title: qsTr("blogs.thearticleof.com")
Label{
text: qsTr("https://blogs.thearticleof.com")
font.pointSize: 24
opacity: 0.2
color: "grey"
rotation: 315
anchors.centerIn: parent
}
RowLayout{
/*Postioning the Row Layout*/
anchors{
centerIn: parent
}
Button{
text: qsTr("OK")
/*Mouse Signal When User Click On Button */
onClicked: {
console.log("Ok Button Clicked ")
}
}
Button{
text: qsTr("Cancel")
/*Mouse Signal When User Click On Button */
onClicked: {
console.log("Cancel Button Clicked ")
}
}
}
}
When we click the button, the following information will be printed on the console:
qml: OK Button clicked
qml: Cancel Button clicked
Next, let’s take a brief look at its common attributes:
autoRepeat : bool
This
attribute is used to control whether to trigger the Pressed, Released
and Clicked signals repeatedly when the button is pressed, the default
value is false
If we set it to true, then it will respond to multiple event handlers.
————————————————
Button{
text: qsTr("OK")
autoRepeat: true
/*Mouse Signal When User Click On Button */
onClicked: {
console.log("Ok Button Clicked.. ")
}
onPressed: {
console.log("Ok Button pressed ..")
}
onReleased: {
console.log("Ok Button Released ..")
}
}Normal click:
qml: OK Button pressed....
qml: OK Button released....
qml: OK Button clicked....Hey, why is it different from what we thought, there is no repetition? What’s going on, look at the official documentation:
This property holds whether the button repeats pressed(), released() and clicked() signals while the button is pressed and held down .
By the way, it’s held, then let’s press it for a while to see:
qml: Ok Button pressed .. qml: Ok Button Released .. qml: Ok Button Clicked.. qml: Ok Button pressed .. qml: Ok Button Released .. qml: Ok Button Clicked.. qml: Ok Button pressed .. qml: Ok Button Released .. qml: Ok Button pressed .. qml: Ok Button Released .. qml: Ok Button Clicked.. qml: Ok Button pressed .. qml: Ok Button Released .. qml: Ok Button pressed .. qml: Ok Button Released .. qml: Ok Button Clicked.. qml: Ok Button pressed .. qml: Ok Button Released .. qml: Ok Button pressed .. qml: Ok Button Released .. qml: Ok Button Clicked.. qml: Ok Button pressed .. qml: Ok Button Released .. qml: Ok Button pressed .. qml: Ok Button Released .. qml: Ok Button Clicked.. qml: Ok Button pressed .. qml: Ok Button Released .. qml: Ok Button pressed .. qml: Ok Button Released .. qml: Ok Button Clicked.. qml: Ok Button pressed .. qml: Ok Button Released .. qml: Ok Button Clicked..
Sure enough, I’ve been doing things. . . . . .
flat : bool
This property supports whether the button is displayed smoothly. If it is set to true, the button will not display the background unless it is a button or selected .
Button{
text: qsTr("OK")
autoRepeat: true
/*Mouse Signal When User Click On Button */
onClicked: {
console.log("Ok Button Clicked.. ")
}
onPressed: {
console.log("Ok Button pressed ..")
}
onReleased: {
console.log("Ok Button Released ..")
}
}
Button{
text: qsTr("Cancel")
flat: true
/*Mouse Signal When User Click On Button */
onClicked: {
console.log("Cancel Button Clicked ")
}
}
Look The Difference Between Ok and Cancel Button where Ok Button is not set flat property while cancel button flat button set true
Obviously, the first button has no default background and border. . . It is as expected, of course, please don’t define the background style of the button yourself, in that case you will not be able to see it. . . . .
highlighted : bool
This
attribute is used to set whether it is highlighted to attract the
user’s attention, it has no effect on keyboard interaction, the default
value is false
Let’s take a look at how to set the button icon
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3
import QtQuick.Controls.Material 2.3
ApplicationWindow {
width: 640
height: 480
visible: true
title: qsTr("blogs.thearticleof.com")
Label{
text: qsTr("https://blogs.thearticleof.com")
font.pointSize: 24
opacity: 0.2
color: "grey"
rotation: 315
anchors.centerIn: parent
}
RowLayout{
/*Postioning the Row Layout*/
anchors{
centerIn: parent
}
// Button{
// text: qsTr("OK")
// autoRepeat: true
// /*Mouse Signal When User Click On Button */
// onClicked: {
// console.log("Ok Button Clicked.. ")
// }
// onPressed: {
// console.log("Ok Button pressed ..")
// }
// onReleased: {
// console.log("Ok Button Released ..")
// }
// }
// Button{
// text: qsTr("Cancel")
// flat: true
// /*Mouse Signal When User Click On Button */
// onClicked: {
// console.log("Cancel Button Clicked ")
// }
// }
Button{
display: AbstractButton.TextUnderIcon
icon.source: "qrc:/address-card-regular.svg"
icon.height: 32
icon.width : 32
highlighted: true
text: qsTr("TextUnderIcon")
onClicked: {
console.log("TextUnderIcon Button Clicked ...")
}
}
Button{
display: AbstractButton.TextOnly
icon.source: "qrc:/address-card-regular.svg"
icon.height: 32
icon.width : 32
highlighted: true
text: qsTr("TextOnly")
onClicked: {
console.log("TextOnly Button Clicked ...")
}
}
Button{
display: AbstractButton.IconOnly
icon.source: "qrc:/address-card-regular.svg"
icon.height: 32
icon.width : 32
highlighted: true
text: qsTr("IconOnly")
onClicked: {
console.log("IconOnly Button Clicked ...")
}
}
Button{
display: AbstractButton.TextBesideIcon
icon.source: "qrc:/address-card-regular.svg"
icon.height: 32
icon.width : 32
highlighted: true
text: qsTr("TextBesideIcon")
onClicked: {
console.log("TextBesideIcon Button Clicked ...")
}
}
}
}
