当在样式中定义时，QT QML 信号不会达到 Canvas：ButtonStyle

Question

我对 QML 很陌生，我正在尝试让 QML Button 在事件发生时更改它的背景。 Button 使用 style: ButtonStyle 和 Canvas 生成一些图形（通过 JavaScript）。我正在使用 QML States 来控制 Button 状态。

我发现 Canvas 不会自动刷新，所以我尝试在 onStateChanged 处理程序中调用 requestPaint()，但是这个信号不知何故没有到达 canvas 当它在 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
        }
    }
}

在此先感谢您的帮助，

格雷格

Answer 1

您在 Canvas 中实现了 onStateChanged 处理程序，这不会更改状态，但 Button 会。

您可以使用信号和槽来存档您想要的内容：

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
            }
        }
    }
}

当在样式中定义时，QT QML 信号不会达到 Canvas：ButtonStyle

QT QML signal does not get to a Canvas when defined in style: ButtonStyle

qt

qml

qtquick2