Как динамически обновлять градиент прямоугольника?

Question

у меня есть это:

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 в реальном времени? Каков наилучший способ приблизиться к этому?

Answer 1

Проблема заключается в том, что ваш элемент 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 можно найти here

Answer 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]; 
     } 
    } 
} 

Не уверен, что это может быть уместно здесь, но так же, как информация, которую я думал, я могу ее здесь поместить, это сработало для меня Спасибо