使用 Javascript 数组模型的 Repeater 在 Qt 5.12 中造成性能问题

Question

我正在使用：

• Qt 5.12
• 在我的目标设备上构建的 IMX 587 处理器。

我面临一些性能问题，因为中继器使用 JavaScript 数组模型，然后每当任何项目发生更改时，整个模型都会重置，并且中继器会重新绘制所有项目。

同样的问题：复制项目时中继器模型非常慢

我的相同项目代码在更新的处理器版本IMX 8目标设备中闪烁，并且还更新了Qt版本

6.4

。在这个设备中，我看不到这个性能问题。

那么，如果我在

IMX 587 处理器目标设备

中将 Qt 版本从

5.12

更新为 6.4，这个性能问题是否得到解决？

从那时起，我尝试更改旧代码，这是一个庞大而复杂的代码。

我还尝试修改我的代码以使用列表模型：

ListModel { id:listModel }

function handleModelChanged() {
    delegateModel.model = areaViewModel;
    const newUiType = areaViewModel.uiType;

    if (newUiType !== uiType || !modelDataIsEqual(delegateModel, listModel) ) { 
        listModel.clear();
        dlaButtonStyle = areaModel.combineBtnStyle;
        oddEvenBtnAppearance = areaModel.getLockedButtonAppearance();

        for (var row = 0; row < delegateModel.model.rowCount(); row++) {
            var item = delegateModel.items.get(row).model;
            var button = dataModelItemToButton(item);                 
            listModel.append(button);
        } 
        
        console.log(listModel.get(0).dataAreaName);
        uiType = newUiType;
    } else {
        console.log("GRID buttons are same");
    }
}

Repeater {
    id: areaRepeater
    model: listModel

    delegate: {
        gridButton;
    }

    onItemAdded: {              
        if (index == areaRepeater.count - 1) {
            console.log("GRID repeater added " + areaRepeater.count + " buttons")
            updateItems()
        }
    }
}
}

但是，当我在

ListModel

中暴露这个

Repeater

时得到了这个输出：

但是我们预期的结果是：

我认为委托中的项目属性设置不正确。

我的代码在哪里犯了错误，该如何解决？

Answer 1

以下 QML 演示了 3 种不同的方法来设置和更新

model

 中的 

Repeater

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
    id: page
    property var dataModel: []
    property list<var> dataList: []
    ListModel { id: dataListModel }
    ColumnLayout {
        Repeater {
            id: repeater
            model: dataModel
            delegate: Label { text: modelData.txt }
        }
        Repeater {
            model: dataList
            delegate: Label { text: modelData.txt }
        }
        Repeater {
            model: dataListModel
            delegate: Label { text: txt }
        }
    }
    function dataModel_add(data) {
        dataModel.push( data );
        repeater.model = dataModel; // inefficient
        dataList.push( data );
        dataListModel.append( data );
    }
    Component.onCompleted: {
        dataModel_add( { "txt" : "Hello" } );
        dataModel_add( { "txt" : "World" } );
    }
}

第一种方法

dataModel

直接使用Javascript，并且不会发生变化检测，因此，我们必须重复更新

repeater.model

才能看到变化，因此效率低下。

第二种和第三种方法，分别是

list<var>

和

ListModel

，都具有变化检测，因此，

Repeater

模型可以设置为声明性，并对后续的

push

/

append

做出反应。

简而言之，不要指望升级到 Qt6.4 就能解决您的问题。您需要更改代码才能退出

Javascript

模型。