Qt QML中如何解决FileDialog多次添加图片均显示最后一张的问题

问题根本原因 #

• 核心问题1：AddImage.qml中source直接绑定了全局filedialog.fileUrl属性，属于响应式绑定。后续每次选择新图片更新filedialog.fileUrl时，所有已创建的AddImage实例的source都会同步更新为最新值，导致所有图片变成最后选中的内容。
• 核心问题2：你封装的create函数中_parent、_callback、_source、_component未声明为局部变量，属于全局作用域变量，多次异步调用时会覆盖之前的参数值，也会导致组件创建逻辑异常。

修复方案 #

1. 修改AddImage.qml，新增自定义属性接收图片地址，取消对全局filedialog的绑定 #

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtQuick.Window 2.0
import io.qt.examples.texteditor 1.0

Image{
    id: root
    // 新增自定义属性接收外部传入的图片地址
    property url imageSource
    width:80
    height:80
    fillMode: Image.PreserveAspectFit
    asynchronous: true
    // 绑定到自身的自定义属性，不再关联全局filedialog
    source: root.imageSource
}

2. 修复JS创建函数的变量作用域问题，新增参数传递图片地址 #

function addImage(imageUrl) {
    // 把选中的url作为参数传入创建逻辑
    CreateObject.create("AddImage.qml", root, function(obj){
        imageAdded(obj, imageUrl)
    });
}
function imageAdded (obj, source) {
    // 创建完成后给实例的imageSource赋值
    obj.imageSource = source
    imagemodels.append({"obj": obj, "source": source})
}

function create(source, parent, callback) {
    // 加var声明为局部变量，避免全局污染和调用覆盖
    var _parent = parent;
    var _callback = callback;
    var _source = source;

    var _component = Qt.createComponent(source);
    function createDone() {
        if (_component.status === Component.Ready)
        {
            var obj = _component.createObject(_parent);
            if (obj != null)
                _callback(obj);
            else
                console.log("Error object: " + _source);

            _component.destroy();
        }
        else if (_component.status === Component.Error)
            console.log("Error component: " + _component.errorString());
    }
    if (_component.status === Component.Ready || _component.status === Component.Error)
        createDone();
    else
        _component.statusChanged.connect(createDone);
}

3. 修改FileDialog的accepted信号处理，传递选中的url #

FileDialog {
    id: filedialog
    nameFilters: ["Image files (*.png *.jpg)"]
    onAccepted: { 
        // 把当前选中的fileUrl传给addImage
        addImage(filedialog.fileUrl)
        console.log("Accepted Files:"+ fileUrls)
    }
}

逻辑说明 #

修复后每个AddImage实例的图片地址保存在自身的imageSource属性中，和全局的filedialog属性解绑，后续更新filedialog的选中值不会影响已创建的实例。同时创建函数的变量改为局部作用域，避免多次调用时参数被覆盖的问题。

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