QML给ListView添加底部模糊效果代码异常，求问题定位与修复方案

预期实现效果 #

代码存在的问题 #

• ShaderEffectSource的sourceRect参数取值错误：sourceRect需要传入相对于源控件（即ScrollView view）的坐标，当前代码传入的是ShaderEffectSource自身在窗口中的坐标，导致截取的内容区域完全错误，无法拿到列表底部的内容做模糊。
• ShaderEffectSource未设置隐藏：该控件仅作为FastBlur的数据源，不需要直接渲染到界面上，未隐藏会导致内容重叠，效果异常。
• ScrollView内部的Column布局设置错误：anchors.centerIn: parent会导致列表初始内容居中，顶部留空，不符合滚动列表的常规布局逻辑。
• 没有给列表添加底部内边距：滚动到底部时，最下方的列表项会被模糊层完全遮挡，无法完整查看。

修复后完整代码 #

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.top: parent.top
            anchors.horizontalCenter: parent.horizontalCenter
            padding.bottom: 90
            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(0, view.height - height, width, height)
        visible: false
    }
    FastBlur {
        id: fastBlur
        anchors.fill: shader
        source: shader
        radius: 20
    }
}

关键修改说明 #

1. 修正sourceRect取值为Qt.rect(0, view.height - height, width, height)，正确截取ScrollView底部对应高度的内容作为模糊源，列表滚动时会自动同步更新截取内容。
2. 给ShaderEffectSource添加visible: false，避免多余内容渲染干扰最终效果。
3. 调整Column布局，移除错误的居中对齐，改为顶部对齐，符合滚动列表的展示逻辑。
4. 给Column添加底部内边距，避免滚动到底部时最后一个列表项被模糊层遮挡。

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