Customizing Buttons in QML - qt

Question

I am new to QML development. I would like to customize the QML button for our requirement. In some QML sample projects, the customization is done as Button.QML by
drawing a rectangle and implementing mouse area onclick() events. example,
import QtQuick 2.5
Rectangle {
id: button
signal clicked
property alias text: text.text
border.width: 1
border.color: "white"
property real textHeight: height - 2
property real fontHeight: 0.3
property bool pressed: mouse.pressed
property real implicitMargin: (width - text.implicitWidth) / 2
Text {
id: text
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
height: parent.textHeight
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.pixelSize: height * fontHeight
color: "#1b1c1d"
font.family: "Open Sans Regular"
}
MouseArea {
id: mouse
anchors.fill: parent
onClicked: button.clicked()
}
}
This code is works for me. But I saw another QT example as
import QtQuick 2.12
import QtQuick.Controls 2.0
Button {
id: controlBt
text: qsTr("Test")
font.pixelSize: 32
contentItem: Text {
text: controlBt.text
font: controlBt.font
opacity: enabled ? 1.0 : 0.3
color: controlBt.down ? "#17a81a" : "#21be2b"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
implicitWidth: 550
implicitHeight: 66
opacity: enabled ? 1 : 0.3
border.color: controlBt.down ? "#17a81a" : "#21be2b"
border.width: 1
radius: 2
}
}
But by using this code for customization, Focus and key events are not working for the button.
Could anyone provide me the best and correct way to customize a QML button.
Thanks

Answer 1

I have used the following code for the customization
UiButton.qml
import QtQuick 2.12
import QtQuick.Controls 2.0
Button {
id: controlBt
text: qsTr("Test")
font.pixelSize: 32
contentItem: Text {
text: controlBt.text
font: controlBt.font
opacity: enabled ? 1.0 : 0.3
color: controlBt.down ? "#17a81a" : "#21be2b"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
implicitWidth: 550
implicitHeight: 66
opacity: enabled ? 1 : 0.3
border.color: controlBt.down ? "#17a81a" : "#21be2b"
border.width: 1
radius: 2
}
}
In the test.qml i have used the above button as
UiButton
{
id: idTestButton
x: 250
y: 512
focus: true
visible: false
KeyNavigation.down:
{
console.log(">>>>>>>>>>>>>>>>>>>>idTestButton: down")
}
Keys.onLeftPressed:
{
console.log(">>>>>>>>>>>>>>>>>>>>idTestButton: onLeftPressed")
}
onClicked: {
console.log(">>>>>>>>>>>>>>>>>>>>idTestButton: onClicked")
}
}
in the application, I have a listView and on pressing down from the last item of listView, i need to set focus on the test button.
on listView Keys.onDownPressed:
Keys.onDownPressed:
{
// on pressing down from last item, I set focus to button as
idTestButton.forceActiveFocus()
}
on using forceActiveFocus(), everything worked for me. Thank you all for your support
Thanks you