Обновление внутренних данных из QML ListModel

Question

У меня есть пара разных списков объектов, возвращаемых из API, которые я использую для определения элементов в ListView. Как сохранить какие-либо изменения, сделанные в результате взаимодействия с пользователем? Как сохранить, какой цвет включен, и какова его интенсивность?

Для краткости я вырезал некоторые фрагменты кода, но в основном это должно отображать серию вертикальных ползунков, только один из которых может быть включен одновременно. Высота ползунка представляет интенсивность выбранного цвета, которая будет влиять на какую-то другую часть системы.

Я реорганизовал это из удаленного кода, который имел демонстрационные данные непосредственно в ListView как ListModel с ListElement Предметы.

Я не уверен, что подпрограмма getData-loop-append - лучший вариант, я открыт для других способов заполнения ListView данными и, возможно, других способов формирования данных. Тем не менее, объект Color в значительной степени требуется.

com.example.datamodels.Data.qml

QtObject {
    id: color
    readonly property string name
    readonly property color displayColor
    property bool enabled = false
    property int intensity = 100
}

property variant dataListA: [
    Color.white,
    Color.blue,
    Color.red
]

property variant dataListB: [
    Color.green,
    Color.purple,
    Color.orange
]

function getData() {
    if (something === enumA) {
        return dataListA;
    } else if (something === enumB) {
        return dataListB;
    }
}

Layout.qml

import com.example.datamodels

ListView {
    id: _list
    model: dataModel

    ListModel {
        id: dataModel
        dynamicRoles: true
        Component.onCompleted: {
            var colors = Data.get();
            for (var i=0; i < colors.length; i++) {
                append(colors[i]);
            }
        }
    }

    delegate: Widget {
        onStateChanged: {
            if (state === "enabled") {
                var items = _list.model;
                // disable any currently enabled
                for (var i = 0; i < items.count; i++) {
                    if (i !== index) {
                        var item = items.get(i);
                        if (item.enabled) {
                            item.enabled = false;
                        }
                    }
                }
            }
        }
    }
}

Widget.qml

Item {
    id: _obj
    height: _bar.height + _grabHandle.height
    width: _grabHandle.width

    property string colorName: model.name
    property bool enabled: model.enabled
    property int intensity: model.intensity
    property color glowColor: model.displayColor

    states: [
        State {
            name: "enabled"
            when: _obj.enabled
            PropertyChanges {
                target: _dragMouseArea.drag
                minimumY: 0
                maximumY: _bar.height;
            }
        },
        State {
            name: "disabled"
            when: !_obj.enabled
            PropertyChanges {
                target: _dragMouseArea.drag
                minimumY: _bar.height / 2
                maximumY: _bar.height / 2
            }
        }
    ]

    Item {
        id: _grabHandle
        height: 100
        width: 30
        x: 0
        y: _bar.height/2
        Drag.active: _dragMouseArea.drag.active

        RectangularGlow {
            id: _glow
            height: parent.height - 20
            width: parent.width - 20
            anchors.centerIn: parent
            color: _obj.glowColor
            cornerRadius: 0.0
            property real adjustedVal: 1.0 - (_grabHandle.y / _bar.height)
            glowRadius: adjustedVal * 20 + 20
            spread: 0.0
            opacity: 1.0
        }

        Text {
            id: _colorTitle
            text: _obj.colorName
            color: "#FFFFFF"
            anchors.topMargin: 0
            font.pixelSize: 22
        }

        MouseArea {
            id: _dragMouseArea
            enabled: true
            anchors.fill: parent
            anchors.centerIn: parent
            drag.target: parent
            drag.axis: Drag.YAxis
            drag.minimumY: _bar.height/2
            drag.maximumY: _bar.height/2
            drag.smoothed: false

            onReleased: {
                if (_obj.enabled) {
                    _obj.intensity = getIntensityFromHeight();
                }
            }

            onClicked: {
                _obj.enabled = !_obj.enabled
            }
        }
    }
}