How to implement GirdListView

[CarbonPool]

Similar to the effect of photo album palace grid, for example, there are 4 pictures in each row, and the data is processed by a for loop. I have not found any relevant implementation cases.

[ogoffart]

Thanks for your question. (Note: I've moved this issue to Discussions as it's better suited for general questions and community interactions. This helps keep our issue tracker focused on bug reports and feature requests.)

The way to do this kind of grid is to manually compute the position of your elements within the for loop. An example of this can be found in the memory tutorial:

slint/examples/memory/memory.slint

Lines 103 to 107 in 8284674

	for tile[i] in root.memory-tiles: MemoryTile {
	x: root.tile-spacing + mod(i, root.column-count) * (root.tile-size + root.tile-spacing);
	y: root.tile-spacing + floor(i / root.row-count) * (root.tile-size + root.tile-spacing);
	width: root.tile-size;
	height: root.tile-size;

[syf20020816]

Hi ! I think you might wanna use the component in my repo : https://github.com/syf20020816/SurrealismUI

SURCollection

SURCollection is a grid storage box, but in reality it is not based on grid layout.

It achieves a flexible grid through a combination of dual for loops and horizontal and vertical layouts

Clicking on the pop-up layer again will close it

example

import {SURButton,SURCollection} from "../../index.slint";
import {Themes,Icons} from "../../themes/index.slint";

component TestCollection inherits Window {
  height: 560px;
  width: 900px;
  
  SURCollection{
    card-height: 300px;
    card-width: 300px;
    column-num: 3;
    font-size : 16px;
    theme: Dark;
    data: [
      [
        {id:0,name:"box1",source:@image-url("./collection_imgs/box1.svg")},
        {id:1,name:"box2",source:@image-url("./collection_imgs/box2.svg")},
        {id:2,name:"box3",source:@image-url("./collection_imgs/box3.svg")}
      ],
      [
        {id:3,name:"box4",source:@image-url("./collection_imgs/box4.svg")},
        
      ],
      [
        {id:4,name:"box6",source:@image-url("./collection_imgs/box6.svg")},
        {id:5,name:"box7",source:@image-url("./collection_imgs/box7.svg")},
      ]
    ];
    clicked(item)=>{
      debug(item.name);
      debug(item.id);
    }
  }
  
}

[CarbonPool]

A good component. It would be best if it could automatically allocate data according to the number of column-num.