如何删除Flickable自动滚动Row中移出屏幕的图片？

现有实现代码 #

Background.qml #

import QtQuick
Flickable{
    id:flickable
    anchors.fill:parent
    contentWidth:row.implicitWidth
    interactive:false
    Row{
        id:row
        anchors.fill:parent
    }
    Timer{
        interval:10;
        running:true;
        repeat:true
        onTriggered:{
            if(flickable.atXEnd){
                Qt.createComponent('Pic.qml').createObject(row)
            }
            flickable.contentX++
        }
    }
}

Pic.qml #

import QtQuick
Image{
    sourceSize.height:parent.height
    fillMode:Image.PreserveAspectFit
    asynchronous:true
    source:'file://'+RandomImage
}

问题描述 #

上述代码可实现随机图片条从左到右持续滚动的效果，目前运行正常，但需删除已滚动出屏幕的图片，请问实现该需求的最优方式是什么？

最优实现方式 #

核心思路是在滚动时检查图片位置，当图片完全超出左侧可视区域时销毁对象，以下两种方式都能高效实现需求：

方式一：在Timer中主动遍历清理 #

修改Background.qml的Timer逻辑，每次滚动后反向遍历Row内的图片，判断是否完全出界，若是则销毁：

Timer{
    interval:10;
    running:true;
    repeat:true
    onTriggered:{
        if(flickable.atXEnd){
            Qt.createComponent('Pic.qml').createObject(row)
        }
        flickable.contentX++
        
        // 反向遍历避免删除元素导致索引错乱
        for(let i = row.children.length - 1; i >= 0; i--){
            const pic = row.children[i]
            // 图片右边缘 <= 可视区域左边界时，完全出界
            if(pic.x + pic.width <= flickable.contentX){
                pic.destroy()
            }
        }
    }
}

方式二：图片组件自管理生命周期（更优雅） #

在Pic.qml中监听自身位置变化，当判断完全出界时主动销毁，逻辑内聚性更强：

import QtQuick
Image{
    sourceSize.height:parent.height
    fillMode:Image.PreserveAspectFit
    asynchronous:true
    source:'file://'+RandomImage
    
    onXChanged: {
        // 通过父级链获取Flickable实例
        const flickable = parent.parent
        if(x + width <= flickable.contentX){
            this.destroy()
        }
    }
}

关键注意点 #

• 遍历子元素必须从后往前，防止删除元素后索引偏移导致漏检
• 使用destroy()会安全释放QML对象资源，避免内存泄漏
• 方式二更符合组件化设计，将生命周期管理逻辑封装在图片组件内部，代码更易维护

内容的提问来源于stack exchange，提问作者Ralf Van Bogaert