如何在 QML Gradient 中动态生成 GradientStops

Question

我想动态生成或删除 GradientStops，并且我还想使用 NumberAnimation 动态更改其颜色。 我有一个 NumberAnimation 来更改各种“idxx”以形成如下所示的动画：

NumberAnimation {
    target: thiz
    property: "idxx"
    duration: settings.cycleTime ?? 500
    from: settings.cycleColorFrom ?? 0
    to: settings.cycleColorTo ?? 15 }

通过使用函数来改变颜色：

function getColor(index){
    var hueIndex = (15 - (((idxx + index) > 15) ? idxx - 15 + index : idxx + index));
    var hue = (hueIndex * cycleEnd / 255) + (cycleStart / 255);
    return Qt.hsva(hue, cycleSaturation, cycleValue, cycleOpacity); }

当我使用渐变时效果很好：

Gradient {
    id: gradientRainbow
    GradientStop { position: 0.000; color: getColor(15) }
    GradientStop { position: 0.067; color: getColor(14) }
    GradientStop { position: 0.133; color: getColor(13) }
    GradientStop { position: 0.200; color: getColor(12) }
    GradientStop { position: 0.267; color: getColor(11) }
    GradientStop { position: 0.333; color: getColor(10) }
    GradientStop { position: 0.400; color: getColor(9) }
    GradientStop { position: 0.467; color: getColor(8) }
    GradientStop { position: 0.533; color: getColor(7) }
    GradientStop { position: 0.600; color: getColor(6) }
    GradientStop { position: 0.667; color: getColor(5) }
    GradientStop { position: 0.733; color: getColor(4) }
    GradientStop { position: 0.800; color: getColor(3) }
    GradientStop { position: 0.867; color: getColor(2) }
    GradientStop { position: 0.933; color: getColor(1) }
    GradientStop { position: 1.000; color: getColor(0) }
}

我尝试使用：

property list<GradientStop> gsl: [GradientStop { position: 0.000; color: getColor(15) },             
                                    GradientStop { position: 0.067; color: getColor(14) },
                                    GradientStop { position: 0.133; color: getColor(13) },
                                    GradientStop { position: 0.200; color: getColor(12) },
                                    GradientStop { position: 0.267; color: getColor(11) },
                                    GradientStop { position: 0.333; color: getColor(10) },
                                    GradientStop { position: 0.400; color: getColor(9) },
                                    GradientStop { position: 0.467; color: getColor(8) },
                                    GradientStop { position: 0.533; color: getColor(7) },
                                    GradientStop { position: 0.600; color: getColor(6) },
                                    GradientStop { position: 0.667; color: getColor(5) },
                                    GradientStop { position: 0.733; color: getColor(4) },
                                    GradientStop { position: 0.800; color: getColor(3) },
                                    GradientStop { position: 0.867; color: getColor(2) },
                                    GradientStop { position: 0.933; color: getColor(1) },
                                    GradientStop { position: 1.000; color: getColor(0) }]
Gradient {
    id: gradientRainbow
    stops: gsl
}

当 NumberAnimation 运行时，它不会改变颜色，并且我无法在 gsl 中动态添加或删除 GradientStops，这将导致意外标记 ]'、预期标记 {' 或预期限定名称 id。 当我使用（如何在渐变中动态添加停止点）时：

Gradient {
    id: gradientRainbow
    Component.onCompleted: {
        var stops = [];
        for (var i = 15; i >= 0; i--) {
            var position = (15 - i) / 15.0;
            stops.push(gradientStopComponent.createObject(base, { "position": position, "color": getColor(i)}));
        }
        gradientRainbow.stops = stops;
    }
}
Component{
    id: gradientStopComponent
    GradientStop {}
}

NumberAnimation运行时也不会改变颜色

Answer 1

以下说明如何在现有数组上使用

list<GradientStop>

动态创建

array.map

数组：

    property list<var> mystops: [
        { position: 0.0, color: "red" },
        { position: 0.33, color: "yellow" },
        { position: 1.00, color: "green" },
    ]
    
    Rectangle {
        width: 100; height: 100
        gradient: Gradient {
            stops: mystops.map( p => newStop(p) )
        }
    }

    function newStop(props) {
        return gradientStopComponent.createObject(null, props);
    }

    Component{
        id: gradientStopComponent
        GradientStop {}
    }

您可以在线尝试！