如何在Qt 5.12的QML中绘制两端渐隐的线条？

方法：利用Rectangle的Gradient属性实现 #

直接通过Rectangle自带的gradient属性，结合GradientStop控制颜色的透明度变化，就能轻松实现两端渐隐的效果，无需额外依赖复杂模块。

水平渐隐线条示例 #

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 400
    height: 200
    color: "black" // 模拟示例图的黑色背景

    Rectangle {
        width: 300 // 线条长度
        height: 2 // 线条粗细
        anchors.centerIn: parent

        // 定义水平方向的渐隐渐变
        gradient: Gradient {
            // 左端完全透明
            GradientStop { position: 0.0; color: "#00FFFFFF" }
            // 左侧过渡到完全不透明的位置
            GradientStop { position: 0.4; color: "#FFFFFFFF" }
            // 右侧保持完全不透明的结束位置
            GradientStop { position: 0.6; color: "#FFFFFFFF" }
            // 右端完全透明
            GradientStop { position: 1.0; color: "#00FFFFFF" }
        }
    }
}

垂直线条适配 #

如果需要垂直线条，只需修改gradient的orientation属性为Gradient.Vertical：

Rectangle {
    width: 2 // 线条粗细
    height: 300 // 线条长度
    anchors.centerIn: parent

    gradient: Gradient {
        orientation: Gradient.Vertical
        GradientStop { position: 0.0; color: "#00FFFFFF" }
        GradientStop { position: 0.4; color: "#FFFFFFFF" }
        GradientStop { position: 0.6; color: "#FFFFFFFF" }
        GradientStop { position: 1.0; color: "#00FFFFFF" }
    }
}

效果调整 #

• 若想让渐变过渡更平缓，可调整中间两个GradientStop的position值（比如改为0.3和0.7），扩大中间实线区域或拉长渐变范围。
• 修改color值可以更换线条颜色，保持alpha通道格式即可（#AA部分控制透明度，00为全透，FF为完全不透明）。

内容的提问来源于stack exchange，提问作者Vasanth Dhinakaran