'How to make a GridItem use all of the available space in a LazyVGrid?

I would like the 2nd column of my LazyVGrid to fill all of the available space (a bit like flex:1 in css). I should be able to do it by using .flexible(), but I can't get it to work

What am I missing? Thanks in advance for your help!

my code:

LazyVGrid(columns: [
    GridItem(),
    GridItem(.flexible()),
]) {
    ProfilePicture()
    ProfilePicture()
    ProfilePicture()
    ProfilePicture()
}

screenshots:

expected

what I get instead

n.b.

  • I don't want to use .fixed(40) for the first GridItem: I want its width to remain dynamic
  • ProfilePicture() is just a clipped image


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source