CODEWITHSUNDEEP
qtqmlqt-quickqtquickcontrols2qt6
Chairman
Chairman

Reputation: 144

Qt qml Button hover color

I have a custom QML Buton as shown bellow.

import QtQuick 2.15
import QtQuick.Controls 2.15

Button{
    id: dashId
    width: 155
    height: 40
    implicitWidth: 155
    implicitHeight: 40
    text: 'hello'
    flat: true

    property color colorNormal: '#353535'
    property color colorHovered: '#04b9b9'
    property color colorClicked: '#4d4f50'

    background: Rectangle{
        id: bgColor
        radius: 10
        color: internal.hoverColor
    }
    contentItem: Item {
        id: buttonItem
        visible: true
        Text {
            id: buttonText
            text: dashId.text
            anchors.centerIn: parent
            color: 'white'
        }
    }

    QtObject{
        id: internal

        property var hoverColor: if(dashId.down){
                                     dashId.down ? colorClicked : colorNormal
                                 }else{
                                     dashId.hovered ? colorHovered : colorNormal
                                 }

    }

}

when hovered, its still have its default hover color on top of custom hover color instead of just custom color.

Am using Qt6 and QtQuick 1.14.1 on Windows 10.

Upvotes: -1

Views: 5964

Answers (3)

BuvinJ
BuvinJ

Reputation: 11076

Set flat: true and down: false to get rid of all the color changing effects!

Upvotes: 0

Andreas Löw
Andreas Löw

Reputation: 1041

I had a similar issue. On macOS and Linux, all buttons rendered as expected but on Windows, there was a transition to the wanted hover color and after that the button faded to white.

The issue was solved with:

flat:true

Upvotes: 4

Chairman
Chairman

Reputation: 144

I found the issue. I had to set highlighted: true and flat: true inside my button.

Upvotes: 2

Related Questions