如何画一个两端渐变的线条？

Question

我正在尝试在QML中绘制一条带有渐变结束的线，类似于这样的线条：

我尝试使用矩形画线，但不知道如何使线条两端渐变消失。

我正在使用Qt 5.12。

- Vasanth Dhinakaran

---

你是不是需要你的线条有尖锐的边缘或者只是模糊淡化？答案不会生成与你的示例图像完全相同的输出。另外，需要注意的是，答案中提供的偏移量会随着线条长度的变化而改变。这符合你的需求吗？ - undefined

Answer 1

你可以同时使用矩形项目和渐变，例如：

    Rectangle {
        anchors.fill: parent
        color: "black"

        Rectangle {
            anchors.centerIn: parent
            width: 400
            height: 5
            border.width: 0
            gradient: Gradient {
                orientation: Gradient.Horizontal
                GradientStop { position: 0.0; color: "black" }
                GradientStop { position: 0.25; color: "white" }
                GradientStop { position: 0.75; color: "white" }
                GradientStop { position: 1.0; color: "black" }
            }
        }
    }

- folibis

Answer 2

你还可以使用RadialGradient：

    RadialGradient {
        anchors.centerIn: parent
        width: 400
        height: 5
        gradient: Gradient {
            GradientStop { position: 0.0; color: "white" }
            GradientStop { position: 0.5; color: "black" }
        }
    }

你可以在线试用！

- Stephen Quan