Rectangle 内的 LinearGradient 显示模糊的白色边框

Question

我使用LinearGradient作为矩形的背景，但是矩形的左右边框有点白而且模糊。我怎样才能避免这种情况？

我尝试在 Rectangle 上设置以下属性，但没有成功。

clip: true
smooth: true
antialiasing: true

这是我的代码：

import QtQuick 2.15
import QtQuick.Window 2.15
import QtGraphicalEffects 1.15

Window {
    width: 640
    height: 480
    visible: true

Rectangle {
    anchors.fill: parent
    color: "#4f4444"
}

Rectangle {
    id: root
    anchors.centerIn: parent
    width: 355
    height: 90
    radius: 50

    LinearGradient {
        anchors.fill: parent
        source: ShaderEffectSource {
            sourceItem: root
            recursive: true
        }
        start: Qt.point(0, 0)
        end: Qt.point(parent.width, 0)
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#2a3254" }
            GradientStop { position: 1.0; color: "#0e1c57" }
        }
    }

    Text {
        anchors.centerIn: parent
        text: "Click me!"
        color: "white"
    }
}
}

Answer 1

问题是它正在平滑形状的边缘以与包含渐变的矩形混合 (root)。如果您更改该矩形的颜色以匹配其后面绘制的颜色，您将不会再看到这些边。

Rectangle {
    id: bground
    anchors.fill: parent
    color: "#4f4444"
}

Rectangle {
    id: root
    color: bground.color  // Match the background's color

    LinearGradient { ... }
}

Rectangle 内的 LinearGradient 显示模糊的白色边框

LinearGradient inside Rectangle is displaying blurred white borders

qt

qml