using Shape as Pane background gives 1 pixel white line

[mzimmers]

Hi all -

I'm trying to use a Shape (with a LinearGradient) as a background for Panes. For some reason, I'm getting some 1 pixel white lines between my Panes. Is this a bug, or am I doing something wrong?

My code:

// Main.qml
import QtQuick
import QtQuick.Controls

ApplicationWindow {
    id: mainWindow
    width: 800
    height: 480
    visible: true
    title: qsTr("Hello World")
    SpaceDashboard {
        id: spaceDashboard
        anchors.fill: parent
    }
}

// SpaceDashboard.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Pane {
    id: spaceDashboard
    padding: 0
    anchors.fill: parent
    background: ScreenBackground {
        bgHeight: spaceDashboard.height
        bgWidth: spaceDashboard.width
    }
    ColumnLayout {
        anchors.fill: parent
        spacing: 0
        Rectangle {
            Layout.preferredHeight: 64
            Layout.fillWidth: true
            color: 'white'
            opacity: 0.2
        }
        Pane {
            id: infoPane
            Layout.preferredHeight: 128
            Layout.fillWidth: true
            padding: 0
            background: ScreenBackground {
                bgHeight: infoPane.height
                bgWidth: infoPane.availableWidth
                homeScreen: true
            }
        }
        Item {
            Layout.fillHeight: true
        }
    }
}

// ScreenBackground.qml
import QtQuick
import QtQuick.Shapes

Shape {
    property bool homeScreen: false
    required property int bgHeight
    required property int bgWidth
    ShapePath {
        fillGradient: homeScreen ? homeScreenGradient : primaryScreenGradient
        startX: 0
        startY: 0
        PathLine {
            relativeX: bgWidth
            relativeY: 0
        }
        PathLine {
            relativeX: 0
            relativeY: bgHeight
        }
        PathLine {
            relativeX: bgWidth * -1
            relativeY: 0
        }
        PathLine {
            relativeX: 0
            relativeY: bgHeight * (-1)
        }
    }
    LinearGradient {
        id: homeScreenGradient
        property double angle: 45.0
        x1: 0
        y1: mainWindow.width * Math.sin(angle)
        x2: mainWindow.width
        y2: 0
        GradientStop { position: 0.42; color: "#161254" }
        GradientStop { position: 0.71; color: "#3c2685" }
        GradientStop { position: 1.07; color: "#0aa9c6" }
    }

    LinearGradient {
        id: primaryScreenGradient
        property double angle: 45.0
        x1: 0
        y1: mainWindow.width * Math.sin(angle)
        x2: mainWindow.width
        y2: 0
        GradientStop { position: 0.0; color: "black" }
        GradientStop { position: 1.0; color: "white" }
    }
}

Thanks for any suggestions. Also, if someone has a simpler way to do this, I'm open to ideas.

[JoeCFD]

the white border is from ShapePath
ShapePath {
fillGradient: homeScreen ? homeScreenGradient : primaryScreenGradient
startX: 0
startY: 0
strokeWidth : 0

will remove the border.
Question now is:
why do you want to draw a border when the pane area is coloured with LinearGradient?

[mzimmers]

@JoeCFD said in using Shape as Pane background gives 1 pixel white line:

why do you want to draw a border when the pane area is coloured with LinearGradient

I don't want to draw a border. This is the only way I know to define the boundaries of the Shape.

Using the strokeWidth property didn't seem to change anything. EDIT: when I set the strokeWidth to -1, it now works.

[JoeCFD]

@mzimmers I tested your code with strokeWidth : 0 on Ubuntu 22.04 and Qt 6.8. 0 is OK.

[mzimmers]

Good to know. I'm running 6.5.3 on Windows 11. Thanks for pointing me in the right direction, though.