Shuffle QML ListModel

Question

I have a ListModel and a repeater. The repeater draws the Items from the ListModel, one on top of a another. That works fine so far.

Except that for on each application start I want to have a different draw order.

So i guess it would be best, to "shuffle" the ListElements in the ListModel before applying the Repeater. How can I do this?

That is common, but it is also great that you feed back the solution, for example in which it could be improved, etc. :D — eyllanesc, Feb 27 '18 at 02:04

eyllanesc · Accepted Answer · 2018-02-25T18:12:53.397

Using the following answers:

And adapting for a ListModel you get the following function:

utils.js

//https://stackoverflow.com/a/2450976/6622587
function shuffle(model){
    var currentIndex = model.count, temporaryValue, randomIndex;

    // While there remain elements to shuffle...
    while (0 !== currentIndex) {
        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex)
        currentIndex -= 1
        // And swap it with the current element.
        // the dictionaries maintain their reference so a copy should be made
        // https://stackoverflow.com/a/36645492/6622587
        temporaryValue = JSON.parse(JSON.stringify(model.get(currentIndex)))
        model.set(currentIndex, model.get(randomIndex))
        model.set(randomIndex, temporaryValue);
    }
    return model;
}

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import "utils.js" as Util

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ListModel {
        id: fruitModel
        ListElement {
            name: "Apple"
            cost: 2.45
        }
        ListElement {
            name: "Banana"
            cost: 1.95
        }
        ListElement {
            name: "Orange"
            cost: 3.25
        }
    }

    Column {
        Repeater {
            model: Util.shuffle(fruitModel)
            Row {
                spacing: 10
                Text { text: name }
                Text { text: '$' + cost }
            }
        }
    }
}

In this link you can find an example.

Stephen Quan · Answer 2 · 2022-10-18T09:44:17.710

If you want to keep your original ListModel immutable (i.e. unchanging), you can control how the ListModel is viewed via a DelegateModel. In the following, we are going to initialize the DelegateModel to passthru the ListModel then we will arbitrarily do 10 random swaps to it:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
    ListView {
        anchors.fill: parent
        model: ShuffleDelegateModel {
            id: shuffleDelegateModel
            model: animals
            delegate: Frame {
                width: ListView.view.width
                Text {
                    text: model.name
                }
            }
        }
    }
    ListModel {
        id: animals
        ListElement { name: "cat" }
        ListElement { name: "dog" }
        ListElement { name: "monkey" }
        ListElement { name: "lion" }
        ListElement { name: "giraffe" }
        ListElement { name: "elephant" }
    }
    footer: Frame {
        RowLayout {
            Button {
                text: qsTr("Shuffle")
                onClicked: shuffleDelegateModel.shuffle(10)
            }
        }
    }
}

//ShuffleDelegateModel.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQml.Models 2.15
DelegateModel {
    groups: [
        DelegateModelGroup {
            id: visibleItems
            name: "visible"
            includeByDefault: true
        }
    ]
    filterOnGroup: "visible"
    function shuffle(loops) {
        for (let i = 0; i < loops; i++) {
            let index = Math.floor(Math.random() * visibleItems.count);
            let newIndex = Math.floor(Math.random() * visibleItems.count);
            if (index === newIndex) continue;
            visibleItems.move(index, newIndex, 1);
        }
    }
}

You can Try it Online!

Shuffle QML ListModel

2 Answers2