How to create fixed number of emlement from array?

[ziyouwa]

component A inherits Rectangle {
    in-out property <[string]> all_data: [ "a", "b", "c", "d", "e", "f", "g", "h"];

   VerticalBox {
       for data in all_data: ??
    }
}

I want to display 3 data in a row, how to do it? I try to use GridBox, but it don't support 'for' loop.

[mitchgrout]

Sounds like you might be after repetition, e..g something like...

VerticalBox {
  for data in all_data: Text { text: "Your data is " + data; }
}

[ziyouwa]

I want to like this:
a b c
d e f
g h

[mitchgrout]

Hmm, I was thinking that something like this would be doable:

  private property<int>      columns: 3;
  private property<[string]> strings: ["a", "b", "c", "d", "e", "f", "g"];
  
  GridLayout {
    for row in ceil(strings.length / columns): Row {
      private property<int> offset: row * columns;

      for column in min(columns, strings.length - offset): Text {
        text: strings[offset + column];
      }
    }
  }

...but this triggers an error 'if' or 'for' expressions are not currently supported in grid layouts :(

One option would be to manually 'reshape' your array into that layout you want, e..g

private property<[[string]]> strings: [
  ["a", "b", "c"],
  ["d", "e", "f"],
  ["g", "h"],
];

...but even then, with that^ error you wouldn't be able to double-iterate to construct your grid layout...

Looks like this is being tracked by #358 - there's some suggestions in here you should have a look at