Button with MouseArea property and animation
-
Hello,
I want to have a button and define a MouseArea property for it, but when I have MouseArea the default animation goes away. For refenrence:
Button { text: 'something' }
This has a normal animation and this doesn't:
Button { text:: 'anything' MouseArea { } }
How can I have MouseArea overriding the onPressed property and also have a normal animation ?
-
@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
Button
has aclicked
signal, so it already supports anonClicked
handler.These things you want to do with your
MouseArea
are already implemented by the button using its ownMouseArea
. 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 ownMouseArea
so all of the built-in functionality stopped working. -
@Ronel_qtmaster, is there some way to keep them ? Or maybe a way for me to implement them?
-
@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?
-
-
-
-
-
-
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?
-
@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. -
@Ivelin I sent my last post before seeing yours.
In your
CustomButton
you still have aMouseArea
. As explained, this will override the built-inMouseArea
of theButton
and the behaviours you expect will no longer work.I would just get rid of the
MouseArea
and add youronClicked
handler directly to yourCustomButton
. -
@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, 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 ?
-
@Ivelin it's because the animation is implemented in the
background
of theButton
you are using - this is the implementation as provided by Qt. When you implement your ownbackground
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. -
@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