How to use javafx to view cells that wraps horizontally and scrolls vertically

Question

I'm trying to determine how, using javafx, to approach displaying cells (image thumbnails or images) similar to Windows Explorer where images are shown in rows that wrap at horizontal boundaries but scroll in the vertical direction.

Is a tableview the approach to use and then update the column number when the view is resized? A little help would be greatly appreciated. Better yet a simple example code.

I'm pretty new to this forum and I have searched but can't really get started on this.

Thanks

Answer 1

Wrapping a FlowPane inside a ScrollPane would be a much simpler approach to the problem.

Example:

This uses some rectangles with numbers instead of images, but I think it's enough to get an idea how to use the Layouts:

FlowPane contentContainer = new FlowPane();
contentContainer.setVgap(10);
contentContainer.setHgap(10);

ScrollPane scroll = new ScrollPane(contentContainer);
scroll.setFitToWidth(true);

// fill FlowPane with some content
ArrayList<Node> content = new ArrayList<>();

for (int i = 0; i < 15; i++) {
    Text text = new Text(Integer.toString(i));
    text.setFill(Color.YELLOW);
    StackPane pane = new StackPane(text);
    pane.setStyle("-fx-background-color: blue;");
    pane.setPrefSize(50, 50);
    content.add(pane);
}

contentContainer.getChildren().setAll(content);