如何在渐变中动态添加停靠点

Question

我有以下梯度：

    Item {
        id: base
        width: 200
        height: 100
        start: Qt.point(0,0)
        end: Qt.point(width, 0)
        gradient: Gradient {
            GradientStop { position: 0.0; color: "white"}
            GradientStop { position: 0.5; color: "black" }
            GradientStop { position: 1.0; color: "white"}
        }

Gradient doesn't have any member functions to append new stops and neither does LinearGradient 的站点属性。

如何添加停靠点以动态改变渐变？

另一种方法是每次更改时创建一个新的 LinearGradient。

Answer 1

Gradient 被定义为 list 属性，如链接文档中所述，不能直接由 appending/removing 元素修改

将新停靠点附加到 Gradient 的唯一方法是重新分配 stops 属性 list。这是一个示例代码：

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    visible: true
    width: 200
    height: 100

    Rectangle {
        id: base
        anchors.fill: parent
        gradient: Gradient {
            id:gradient

            GradientStop { position: 0.0; color: "white"}
            GradientStop { position: 0.1; color: "black" }
            GradientStop { position: 0.3; color: "white"}
        }

        Component
        {
            id:stopComponent
            GradientStop {}
        }

        Component.onCompleted:
        {
            // Type 1: Aassign a all new stop list
            var s1 = stopComponent.createObject(base, {"position":0.2,"color":"red"});
            var s2 = stopComponent.createObject(base, {"position":0.4,"color":"yellow"});
            var s3 = stopComponent.createObject(base, {"position":0.6,"color":"blue"});
            gradient.stops = [s1,s2,s3];

            // Type 2:Append to the original stop list
            var newStops = [];
            for (var idx = 0; idx < gradient.stops.length;idx++)
            {
                newStops.push(gradient.stops[idx]);
            }
            newStops.push(s3);
            gradient.stops = newStops;
        }
    }
}

如何在渐变中动态添加停靠点

How to dynamically add stops in a Gradient

qt

qml

qtquick2