Sorry for yet another question but... grid of items...

[Tsuiban]

I'm trying to figure out the best way to do the following:

I have two arrays of arrays of ints:

let column_headers: Vec<Vec<int>>;
let row_headers: Vec<Vec<int>>;

and then a grid of boxes that will be turned on and off by the main program. I'm trying to figure out a few things with the following restrictions:

1. On each run, the size of the array may be different, ranging from 10 to 15 (the vertical and horizontal sizes are the same, i.e. it's a square grid)
2. Each item within the grid will either be ON or OFF (I can represent those however I choose, doesn't have to be a boolean)
3. an ON state will have the background set to BLUE and an OFF state will have the background set to WHITE.
4. The ON and OFF state will be modified by the program as it runs once the user hits the Start button.
5. The call back from the Start button will start those states cycling and will run for quite a while before the callback returns. Alternatively, the callback can start another thread that will cause the states to be cycling ON and OFF.

In Essence, the thing will look something like:

callback do_start();
in-out property<int> dimensions;
in-out property<[[int]]> column_headers;
in-out property<[[int]]> row_headers;
in-out property <[[bool]]> states;


VerticalBox {
    HorizontalBox {
        Rectangle {
            width: 40px;
            height: 40px;
        } // Never used, but need as placeholder
        for header in column_headers :    Rectangle { // Top margin of the grid
            width: 40px;
            height: 40px;
            for v in header: Text { text: v }
        }
    }
    for row_header in row_headers: HorizontalBox {
        Rectangle { // Left margin of the grid
            width: 40px;
            height: 40px;
            for v in row_header: Text {text: v}
       }
        for r in dimensions: Rectangle { // This is the body of the grid.
            width: 40px;
            height: 40px;
            border-color: black;
            border-width: 1px;
            background: states ? blue : green; // This doesn't work, of course, but not sure how to do it.
        }
    }
    Button {
        text: "Start";
        clicked => { root.do_start() }
    }
}

That's not how it has to be, just an example of my thinking. Been banging my head against this for the last week on concert with previous question. Thank you for your kindness and assistance as I try to learn Slint!

[ogoffart]

From a quick look at your qeustion, not sure what exactly you are doing, but you could try to use the index and index access.

Like so:

for row_header[index1] in row_headers: HorizontalBox {
        Rectangle { // Left margin of the grid
           // ... skip
       }
        for r[index2] in dimensions: Rectangle { // This is the body of the grid.
            width: 40px;
            height: 40px;
            border-color: black;
            border-width: 1px;
            background:  background: states[index1][index2] ? blue : green;
        }
    }

Does that help?