Qml blur effect on scrollview

AmirCH

i want to add blur effect at the bottom of scrollview like this:
i wrote this code with Qml but does not work correctly. could you please tell me where is the problem and how can i fix this ?

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtGraphicalEffects 1.0

ApplicationWindow {
    id: window
    width: 480
    height: 520
    visible: true
    title: qsTr('Blur List')
    color: 'black'
    ScrollView {
        id: view
        anchors.fill: parent
        Column {
            spacing: 15
            width: view.width - 10
            anchors.centerIn: parent
            Repeater {
                model: 30
                delegate: Rectangle {
                    width: view.width - 5
                    height: 50
                    radius: 10
                    color: 'orange'
                }
            }
        }
    }
    ShaderEffectSource {
        id: shader
        width: view.width
        height: 80
        anchors.bottom: parent.bottom
        sourceItem: view
        sourceRect: Qt.rect(x, y, width, height)
    }
    FastBlur {
        id: fastBlur
        anchors.fill: shader
        source: shader
        radius: 20
    }
}```

Markkyboy

Here's something close to your description/image/code. But not with ScrollView, your image shows a numbered list, this is ListView or similar.

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtGraphicalEffects 1.0

ApplicationWindow {
    id: window
    width: 540
    height: 540
    visible: true
    title: qsTr('Blur list bottom')

    ListView {
        id: view
        model: 30
        spacing: 2
        anchors.fill: parent

        delegate: Rectangle { id: bar
            width: view.width; height: 80; radius: 10
            LinearGradient {
                anchors.fill: bar
                start: Qt.point(500, 0)
                end: Qt.point(0, 0)
                gradient: Gradient {
                    GradientStop { position: 0.0; color: "darkblue" }
                    GradientStop { position: 1.0; color: "green" }
                }
            }
            Label { x: 10; text: index; font.pixelSize: 24; color: "white"; anchors.verticalCenter: parent.verticalCenter }
        }
    }
    ShaderEffectSource {
        id: effectSource
        sourceItem: view
        width: parent.width
        height: 100
        sourceRect: Qt.rect(x,y, width, height)
        anchors.bottom: view.bottom
    }

    FastBlur{
        anchors.fill: effectSource
        source: effectSource
        radius: 100
    }

    Label { text: "Some layout here"; color: "white"; font.pixelSize: 18; anchors.centerIn: effectSource }
}