CODEWITHSUNDEEP
qtqml
aarelovich
aarelovich

Reputation: 5576

Modify hover behaviour for a simple button for QML in Qt 6.1.2

I just made the change from Qt 5.12.3 to 6.1.2. Having done this I went ahead and compiled a very simple QML App:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0

ApplicationWindow {

    id: mainWindow

    visible: true
    //visibility: Window.Maximized
    width: 1000
    height: 800
    title: qsTr("Hello World")

    Button {
        id: myTestButton
        width: 100
        height: 50
        text: "Click Me!"
        anchors.centerIn: parent
        //hoverEnabled: false
        onClicked: {
            console.log("Button Was clicked")
        }
    }




}

When I hover over the button now, it slowñy gets covered by a slight blue tranparent overlay while the mouse is over the button. I can disable this by setting hoverEnabled to false, but I much rather change it to something that I can use. How can change the color of this hover overlay?

Upvotes: 3

Views: 2868

Answers (3)

DavidW
DavidW

Reputation: 30929

This seemed like something that was imposed by the default style used on Windows (this was changed in Qt6). Probably from https://github.com/qt/qtdeclarative/blob/d6961c09de36e15c57f29109edf5fbfef53ef4d4/src/quickcontrols2/windows/Button.qml#L19 (but I'm not completely certain).

I couldn't find any obvious way of customizing this, therefore I switched the style QML was using (in my case globally, in C++, before loading anything):

QQuickStyle::setStyle("Fusion");

(Other ways of selecting styles exist)

Obviously this does change the overall appearance of the application, but that may not matter if you're heavily customizing all your components.

If you do want to customize the effect instead of disabling it, then you're probably still better switching styles, and then customizing your background item as proposed in one of the other answers. Otherwise it'll almost certainly fight with whatever customization you add in background. The Qt documentation discourages customization of the Windows style and advises you to base a customized control on "a style that's available on all platforms".

Upvotes: 1

kenash0625
kenash0625

Reputation: 697

This is an example with the help of qt documentation:

Button {
    id: control
    text: "First"
    Layout.fillWidth: true
    hoverEnabled: true

    background: Rectangle {
        implicitWidth: 100
        implicitHeight: 40
        opacity: enabled ? 1 : 0.3
        border.color: control.down ? "#ff0000" : (control.hovered ? "#0000ff" : "#00ff00")
        border.width: 1
        radius: 2
     }
}

Upvotes: 1

Crystal
Crystal

Reputation: 75

Within Button {} try adding

flat: true

The default value is false and highlights the background of the button when hovered over.

Upvotes: 1

Related Questions