Customizing Buttons in QML

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

The best way to customize the `Button` is to do that as Qt docs says: [Customizing Button](https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-button). As for the focus, you always can handle it using [activeFocus](https://doc.qt.io/qt-5/qml-qtquick-item.html#activeFocus-prop) property. Or take the [default implementation](https://github.com/qt/qtquickcontrols2/blob/dev/src/imports/controls/Button.qml) as a template and change it. — folibis, Nov 27 '19 at 14:48
The code looks correct to me. You'd need to provide a minimal example that reproduces the problem. — Mitch, Nov 27 '19 at 18:44
AFAIR for some strange reason Qt Quick buttons react to spacebar, instead of Enter. — mip, Nov 27 '19 at 22:40
Our required button will have Gradient effects on focus in and out events, Change in border and text colors depending on various states of button(not only focus in and out state). states will be Enabled button without focus, enabled button with focus, disabled button without focus, disabled button with focus, etc.. . In this case which method is more suitable for the customization, 1) Drawing rectangles like ``` item{ Rectangle{ ......} mouseArea{....}} ``` or 2) Derive from QML button as ``` Button{ contentItem{....} Background{.....}}```. Could anyone Please provide your suggestions forthis — QML Developer, Nov 28 '19 at 09:58

QML Developer · Answer 1 · 2019-11-28T09:29:07.823

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

Customizing Buttons in QML

1 Answers1