-1

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.

eyllanesc
  • 235,170
  • 19
  • 170
  • 241
Chairman
  • 134
  • 1
  • 10
  • I do not reproduce the problem, maybe another part of your code is generating that problem – eyllanesc Mar 15 '21 at 07:34
  • 1
    what does this strange construction should do, I mean the `if`? it just broke my brain. don't you mean instead: `property var hoverColor: dashId.down ? colorClicked : (dashId.hovered ? colorHovered : colorNormal)`. This is besides the fact that a separate object is simply redundant here. – folibis Mar 15 '21 at 09:53
  • Also, I don't recommend making `hoverColor` a `var`. `var` properties do not automatically notify bindings when they are updated. Since it stores a color, it should be declared as a color. – JarMan Mar 15 '21 at 14:41
  • You all dint answer my question. My format is very correct. Including the above comment implementation, None worked. My question is? Why after applying dynamic hover color, button default hover color still apply on top of dynamic one?? – Chairman Mar 15 '21 at 21:45

2 Answers2

3

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

Andreas Löw
  • 1,002
  • 8
  • 15
1

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

Chairman
  • 134
  • 1
  • 10