在style:ButtonStyle中定义时，QT QML信号不会到达画布

我对QML很陌生，我正在尝试制作一个QML

按钮，在事件发生时更改它的背景。
按钮
使用
样式：ButtonStyle
和
画布
生成一些图形（通过JavaScript）。我正在使用QML
State
s来控制
按钮的状态

我发现
Canvas
不会自动刷新，因此我尝试在
onStateChanged
处理程序中调用
requestPaint（）
，但当在
style
属性中定义该信号时，该信号不知何故无法到达画布

这是我的密码：

Button {
    id: small_rounded_button
    state: "OFF"
    states: [
        State {
            name: "ON"
            PropertyChanges {
                target: small_rounded_button
                backgroundColor: "#18243C"
            }
        },
        State {
            name: "OFF"
            PropertyChanges {
                target: small_rounded_button
                backgroundColor: "#aaa"
            }
        }
    ]

    MouseArea {
        anchors.fill: parent
        onClicked: {
            if (small_rounded_button.enabled == true)
            {
                if (small_rounded_button.state == "ON")
                {
                    small_rounded_button.state = "OFF"
                }
                else
                {
                    small_rounded_button.state = "ON"
                }
            }
        }
    }

    style: ButtonStyle {
        background: Item {
            Canvas {
                anchors.fill: parent
                onPaint: {
                    var ctx = getContext("2d");
                    ctx.reset();

                    ctx.beginPath();
                    ctx.lineWidth = height * 0.1;
                    ctx.roundedRect(ctx.lineWidth / 2, ctx.lineWidth / 2,
                                    width - ctx.lineWidth, height - ctx.lineWidth, small_rounded_button.radius, small_rounded_button.radius);
                    ctx.strokeStyle = "grey";
                    ctx.stroke();

                    /* this definitely sets the colour when app starts */
                    ctx.fillStyle = small_rounded_button.backgroundColor;

                    ctx.fill();
                }

                /* This never happens */
                onStateChanged: {
                    requestPaint()
                }
            }

            Label {
                text: small_rounded_button.text
                color: "#000"
                font.pixelSize: small_rounded_button.height * 0.5
                //anchors.centerIn: parent
            }
            label: null
        }
    }
}

提前感谢您的帮助

Greg
您在
画布中实现了
onStateChanged
处理程序，该处理程序不会更改状态，但您的
按钮会更改状态

您可以使用信号和插槽来归档所需内容：

Canvas {
    Component.onCompleted: {
        small_rounded_button.stateChanged.connect(requestPaint);
    }
}

无论如何，您的代码中还有更多的问题，下面是一个正常工作的版本：

import QtQuick 2.0
import QtQuick.Controls  1.3
import QtQuick.Controls.Styles 1.3

Button {
    id: small_rounded_button
    property string backgroundColor : "#f0f"
    state: "OFF"
    states: [
        State {
            name: "ON"
            PropertyChanges {
                target: small_rounded_button
                backgroundColor: "#18243C"
            }
        },
        State {
            name: "OFF"
            PropertyChanges {
                target: small_rounded_button
                backgroundColor: "#aaa"
            }
        }
    ]

    MouseArea {
        anchors.fill: parent
        onClicked: {
            if (small_rounded_button.enabled == true)
            {
                if (small_rounded_button.state == "ON")
                {
                    small_rounded_button.state = "OFF"
                }
                else
                {
                    small_rounded_button.state = "ON"
                }
            }
        }
    }

    style: ButtonStyle {
        background: Item {
            Canvas {
                Component.onCompleted: {
                    requestPaint();
                    small_rounded_button.stateChanged.connect(requestPaint);
                }
                anchors.fill: parent
                onPaint: {
                    var ctx = getContext("2d");
                    ctx.reset();

                    ctx.beginPath();
                    ctx.lineWidth = height * 0.1;
                    ctx.roundedRect(ctx.lineWidth / 2, ctx.lineWidth / 2,
                    width - ctx.lineWidth, height - ctx.lineWidth, small_rounded_button.radius, small_rounded_button.radius);
                    ctx.strokeStyle = "grey";
                    ctx.stroke();

                    /* this definitely sets the colour when app starts */
                    ctx.fillStyle = small_rounded_button.backgroundColor;

                    ctx.fillRect(0, 0, width, height);
                }

            }

            Label {
                text: small_rounded_button.text
                color: "#000"
                font.pixelSize: small_rounded_button.height * 0.5
                //anchors.centerIn: parent
            }
        }
    }
}

回答得好！非常感谢你！谢谢你。我有一个跟进问题；我试着用滑块做类似的事情。当滑块值更改时，我希望画布重新绘制。我试着给画布一个id，并从sliders onValueChanged方法调用redraw事件，但像BaCaRoZzo一样，我无法让它工作。因此，我尝试找到如何将画布连接到滑块，类似于您的解决方案aep，但我找不到滑块连接的方法。你有什么想法吗？