2

我有这个：

    Rectangle{
    id:testrect

    property color gradcolor:"#8C8F8C"
    gradient:
        Gradient {
        GradientStop { position: 0.0; color: gradcolor }
        GradientStop { position: 0.17; color: "#6A6D6A" }
        GradientStop { position: 0.77; color: gradcolor }
        GradientStop { position: 1.0; color: "#6A6D6A" }
        }

在子 MouseArea 中，我想这样做：

         onEntered: {
            testrect.gradcolor="white"
            parent.border.color = Qt.lighter("#6A6D6A")

边框颜色会根据需要更改，但渐变颜色不会。是不是因为渐变不是实时从 gradcolor 属性中提取的？解决这个问题的最佳方法是什么？

4

2 回答 2

4

问题似乎是，如果您不指示哪个元素包含该属性，则您的Gradient元素未链接到。gradcolor这对我有用：

Rectangle{
    id:testrect
    width: 200
    height: 200
    property color gradcolor: "green"
    gradient: Gradient {
        GradientStop { position: 0.0; color: testrect.gradcolor }
        GradientStop { position: 0.17; color: "#6A6D6A" }
        GradientStop { position: 0.77; color: testrect.gradcolor }
        GradientStop { position: 1.0; color: "#6A6D6A" }
    }

    MouseArea {
        anchors.fill:parent
        hoverEnabled: true  // Mandatory for hover events to work
        onEntered: {
            testrect.gradcolor = "red";
        }
        onExited: {
            testrect.gradcolor = "blue";
        }
    }
}

有关 QML 范围的更多信息，请参见此处

于 2013-08-08T08:54:51.373 回答
2

我在寻找在 QML 中使用画布和渐变时找到了这个答案

import QtQuick 2.0
Canvas {
    id:canvas
    property var ctx
    onPaint:{
        ctx = canvas.getContext('2d');
        ctx.strokeStyle = Qt.rgba(0, 1, 1, 1);
        ctx.lineWidth = 1;
        ctx.beginPath();
        var radgrad = ctx.createRadialGradient(75,50,5,90,60,100);
        radgrad.addColorStop(0, '#A7D3FC');
        radgrad.addColorStop(0.5, '#019F62');
        radgrad.addColorStop(0.9, 'rgba(1,159,98,0)');
        ctx.arc(100,75,50,0,2*Math.PI);
        ctx.fillStyle = radgrad;
        ctx.fill(0,10,10,10);
        ctx.stroke();
    }

    width: 360
    height: 360

    MouseArea {
        anchors.fill: parent
        onClicked: {
            var p = ctx.getImageData(mouseX, mouseY, 1, 1);
            var red = p.data[0];
            var green = p.data[1];
            var blue = p.data[2];
            var alpha = p.data[3];
        }
    }
}

不确定它在这里是否相关，但就像我认为我可以把它放在这里的信息一样，这对我有用 谢谢

于 2013-08-21T08:31:01.830 回答