Button with MouseArea property and animation

[Ronel_qtmaster]

@Ivelin QML Button has already a mouseArea included.If for instance you wanted to create Your ownButton now you could add MouseArea to it.For exemple, if the button was a Rectangle

Rectangle {
id: customButton
color: "blue"
width:50
height:30
MouseArea {
anchors.fill:parent
}
}
something like this

[Ivelin]

@sierdzio, I want to have it so I can refer to onClicked and do stuff. Is it possible with the dafault animations ?

[Bob64]

@Ivelin Button has a clicked signal, so it already supports an onClicked handler.

These things you want to do with your MouseArea are already implemented by the button using its own MouseArea. It's also how it implements its "animations" (by which I presume you mean things like the changing background and border, etc.) when the mouse enters the button's area.

When you added your own MouseArea it started to grab all of the mouse events and they stopped being propagated to the button's own MouseArea so all of the built-in functionality stopped working.

[Ivelin]

@Ronel_qtmaster, is there some way to keep them ? Or maybe a way for me to implement them?

[Bob64]

@Ivelin you are going to have to explain exactly what it is you are trying to do. I have already answered you about onClicked and you appear to have ignored what I said. Let me know if you did not understand.

[Ivelin]

@Bob64, hello

Sorry for the misunderstanding

I made your answer marked as a solution, but I just realized that it is not working as I expected.

Let me try again.

I want to have a button and I want to do stuff on click, but when I use the onClicked proeprty that is built-in in the qml component it removes the default button animation. It removes it with MouseArea onClicked as well.

By animation I mean the effect that happens after clicking the button.

How can I have the onClicked property as well as the animation ?

Could you please clear my thoughts here?

[Ivelin]

@Bob64

In my current scenario I have a custom button:

Button {
    id:control1
  
    implicitWidth: 46
    implicitHeight: 46

    property real radius: 8
    property color backgroundColor: "#14A44D"
    property string setIcon: ""
    property color textColor: "#FFFFFF"

    property real borderWidth: 0
    property color borderColor: "transparent"
    font.pixelSize: FontStyle.h3
    font.family: FontStyle.getContentFont.name
    font.bold: Font.Bold
    font.weight: Font.Bold

    signal clicked

    MouseArea{
        id:mouseArea
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
        anchors.fill: parent

        onClicked: control1.clicked()

    }
    onPressed: {
        indicator.mx = mouseArea.mouseX
        indicator.my = mouseArea.mouseY
        main.restart()
    }
}

I already tried using the built-in qml property onClicked, but that way control1.clicked() doesn't get called. And the way I have done it there is no animation when I click the button. by animation I mean the effect after the button is clicked

Here is how I use it in my main qml

        CustomButton {
            anchors.horizontalCenter: parent.horizontalCenter
            radius: 0
            backgroundColor: "#00c1c9"
            implicitHeight: 50
            implicitWidth: 300
            text: qsTr("Login")
            onClicked: {
            usernameField.focus = false;
            passwordField.focus = false;
            var jsonObject = {
                "username": usernameField.text,
                "password": passwordField.text
            };

                networkManager.post(jsonObject, "https://secureme.live/register")
                
            }
        }

How can I have do my http request after onClick and still have the default animation when the button is clicked ?

Could you take a look please?

[Bob64]

@Ivelin that is not what I would expect.

What happens if you run this? (I am using Qt 5.15.10 BTW.)

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 640; height: 480
    visible: true
    Button {
        width: 150;  height: 100
        anchors.centerIn: parent
        onClicked: console.log("HELLO")
    }
}

If you run with the default style, there isn't much animation anyway but there is at least a change of button colour on clicking. If I run with Material style, I see changes on entering the button area with the mouse, and various effects on clicking.

None of this seems to have been affected by adding my onClicked handler.

[Bob64]

@Ivelin I sent my last post before seeing yours.

In your CustomButton you still have a MouseArea. As explained, this will override the built-in MouseArea of the Button and the behaviours you expect will no longer work.

I would just get rid of the MouseArea and add your onClicked handler directly to your CustomButton.

[Ivelin]

@Bob64, hello

your code works just as expected.

The problem is that when I do this:

Button {
    id:control1
  
    implicitWidth: 46
    implicitHeight: 46

    property real radius: 8
    property color backgroundColor: "#14A44D"
    property string setIcon: ""
    property color textColor: "#FFFFFF"

    property real borderWidth: 0
    property color borderColor: "transparent"
    font.pixelSize: FontStyle.h3
    font.family: FontStyle.getContentFont.name
    font.bold: Font.Bold
    font.weight: Font.Bold

    signal clicked

    onClicked: control1.clicked() 
    
    onPressed: {
        indicator.mx = mouseArea.mouseX
        indicator.my = mouseArea.mouseY
        main.restart()
    }
}

control1.clicked() doesn't get called. Why is that?

I have provided how I use it in my main qml upwards

[Bob64]

@Ivelin I don't know. Try getting rid of signal clicked. It might be masking the Button signal.

[Ivelin]

@Bob64, yup that was the problem.

There is one more thing though

Button {
    id:control

    implicitWidth: 46
    implicitHeight: 46

    property real radius: 8
    property color backgroundColor: "#14A44D"
    property string setIcon: ""
    property color textColor: "#FFFFFF"

    property real borderWidth: 0
    property color borderColor: "transparent"
    font.pixelSize: FontStyle.h3
    font.family: FontStyle.getContentFont.name
    font.bold: Font.Bold
    font.weight: Font.Bold


    background: Rectangle{
        implicitHeight: control.implicitHeight
        implicitWidth: control.implicitWidth
        radius: control.radius
        color: control.backgroundColor
        border.width: control.borderWidth
        border.color: control.borderColor


    }

    onClicked: {
       control1.clicked()
    }
}

I am just trying to add a background and it works, but the animation goes away agian.. why is that ?

[Bob64]

@Ivelin it's because the animation is implemented in the background of the Button you are using - this is the implementation as provided by Qt. When you implement your own background you completely override the original implementation, so if you want the animations and you want your own customisation, you need to implement it all yourself.

It is a weakness of QML's customisation approach IMO that fine-grained customisations are not generally supported - it tends to be all or nothing as soon as you want any customisation.

What you could do is to find the Button implementation in the source for the style you are using and use that as the basis for your customised background.

[Ronel_qtmaster]

@Ivelin it is simple.When you customize a quick control, you have to hadle the change of color, size and other things yourself.I think you have to read the documentation about customizing quick controls https://doc.qt.io/qt-6/qtquickcontrols-customize.html