5.14版本中qml渐变方向面临问题

Question

我正在使用 QML(5.14) 梯度。我做了一个矩形，我想在其中水平添加渐变，但 5.14 不允许我使用某些功能来解决问题。

Rectangle {
                    id: outerRect
                    width: 279
                    height: 8
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.horizontalCenter: parent.horizontalCenter
                    radius: 7

                    gradient: Gradient {
                            GradientStop { position: 0.0; color: "green" }
                            GradientStop { position: 0.25; color: "lightgreen" }
                            GradientStop { position: 0.5; color: "yellow" }
                            GradientStop { position: 0.75; color: "orange" }
                            GradientStop { position: 1.0; color: "red" }
                        }
                }

我无法使用5.14以上版本，所以请牢记回答问题。

我无法使用“Gradient.Horizontal”或添加“vertical: false”或添加“rotation”，因为矩形的宽度和高度不相同。

Answer 1

正如其他人提到的，您应该能够设置方向：

Gradient {
    orientation: Gradient.Horizontal
    // ...
}

或者，您可能希望使用

LinearGradient

，例如：

    Rectangle {
        id: outerRect
        width: 279
        height: 8
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
        radius: 7
    }

    LinearGradient {
        anchors.fill: outerRect
        source: outerRect  
        start: Qt.point(0, 0)
        //end: Qt.point(0, 8)
        end: Qt.point(279, 0)
        gradient: Gradient {
            GradientStop { position: 0.0; color: "green" }
            GradientStop { position: 0.25; color: "lightgreen" }
            GradientStop { position: 0.5; color: "yellow" }
            GradientStop { position: 0.75; color: "orange" }
            GradientStop { position: 1.0; color: "red" }
        }
    }

通过使用

LinearGradient

，您应该看到您可以完全控制

Gradient

的方向，并且可以通过将

start

和

end

属性设置为适用于您的

Rectangle

的坐标来将其适合您的矩形。使用这种方法可以实现垂直、水平和其他角度。