QML：在 RadioButtonStyle 中使用 Canvas

Question

在 RadioButtonStyle 中使用 Canvas 似乎不起作用。考虑这个简单的例子：

// MyRadioButton.qml
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.3

RadioButton {
    id: base
    implicitHeight: 24

    style: RadioButtonStyle {
        spacing: 4

        indicator: Canvas {
            id: circle
            anchors {
                left: parent.left
                verticalCenter: parent.verticalCenter
            }

            height: 16
            width: 16

            antialiasing: true
            enabled: control.enabled

            property bool hovered: control.hovered
            property bool checked: control.checked | control.pressed
            property color color: update()

            onHoveredChanged: update()
            onCheckedChanged: update()
            onColorChanged: requestPaint()

            function update() {
                if ( checked ) {
                    color = "blue";
                } else if ( hovered ) {
                    color = "green";
                } else {
                   color = "red";
                }
            }

            onPaint: {
                var ctx = getContext( "2d" );
                ctx.save();
                ctx.clearRect( 0, 0, width, height );

                ctx.fillStyle = color;

                print( "color:", color );

                ctx.beginPath();
                ctx.arc( height / 2, width / 2, 7, 0, 2 * Math.PI );
                ctx.fill();

                ctx.restore();
            }

            Behavior on color {
                ColorAnimation {
                    easing.type: Easing.InOutQuad
                }
            }
        }

        label: Text {
            anchors {
                left: parent.left
                verticalCenter: parent.verticalCenter
            }

            text: control.text
            color: control.hovered ? "red" : "black"

            Behavior on color {
                ColorAnimation {
                    easing.type: Easing.InOutQuad
                }
            }
        }
    }
}

// main.qml
import QtQuick 2.4
import QtQuick.Window 2.0

Window {
    id: win
    width: 150
    height: 150

    MyRadioButton {
        text: qsTr( "A radio button" )
    }
}

RadioButton 的行为符合预期，因为调试打印语句报告了正确的颜色 - 只有屏幕上没有任何实际变化。 RadioButton 在正确的视觉状态下初始化，但之后没有改变。

如果我将 Canvas 更改为 Rectangle，那么一切都会按预期进行。

谁能看出我哪里出错了？

Answer 1

问题似乎出在您的 update() 函数上；它已经 exists in QQuickItem。例如，如果您将其重命名为 updateColor()，您的代码将起作用。我不确定为什么会这样，因为无论是否存在名称冲突，您的 update() 函数仍会被调用，所以我希望它能正常工作...

QML：在 RadioButtonStyle 中使用 Canvas

QML: Using a Canvas in a RadioButtonStyle

qt

qml

qt-quick