按钮悬停故障的不透明度变化 QML

Question

I have created a custom virtual keyboard where the components are buttons, whose attributes I have defined in the code below. When I rapidly move the mouse across the buttons, I find that there is a 'flashing' effect whereby the button opacity appears to momentarily drop to 0 and then return. How can I prevent this flashing effect?

import QtQuick 2.15
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.0
import "definitions.js" as Defs

Button {
    id: keyboardButton
    property bool specialButton: false

    contentItem: Text {
        text: keyboardButton.text
        font.family: Defs.font
        font.pointSize: Defs.defaultTextSize
        color: Defs.ivory
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    background: Rectangle {        
        id: background
        property double op: specialButton ? 0.7 : 0.5
        color: Defs.b_blue
        opacity: op
        radius: 0

        OpacityAnimator on opacity{
                        running: keyboardButton.hovered
                        from: background.opacity
                        to: background.op + 0.05
                        duration: 100

        }
        OpacityAnimator on opacity{
                        running: !keyboardButton.hovered
                        from: background.op + 0.05
                        to: background.op
                        duration: 100
        }
    }
}

Answer 1

Using one animator fixes it for me:

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    width: 640
    height: 480
    visible: true

    Flow {
        anchors.fill: parent

        Repeater {
            model: 100

            Button {
                id: keyboardButton

                property bool specialButton: false

                contentItem: Text {
                    text: keyboardButton.text
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    elide: Text.ElideRight
                }

                background: Rectangle {
                    color: "steelblue"
                    opacity: hovered ? baseOpacity + 0.15 : baseOpacity
                    radius: 0
                    
                    property double baseOpacity: keyboardButton.specialButton ? 0.7 : 0.5

                    Behavior on opacity {
                        OpacityAnimator {
                            duration: 100
                        }
                    }
                }
            }
        }
    }
}