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

user_11381179 0
Viewed 40

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
swiftui ios
1 Answers

You don't give a use case, or a Minimal Reproducible Example (MRE), so it is a bit difficult to determine what you do want, other than the second image. You can't produce that with GridItem.Size. You can make that look by setting the alignment on the LazyVGrid like this:

struct GridItemAvailSpace: View {
    let columns = [
        GridItem(),
        GridItem()
    ]
    var body: some View {
        LazyVGrid(columns: columns, alignment: .leading) {
            ProfilePicture()
            ProfilePicture()
            ProfilePicture()
            ProfilePicture()
        }
    }
}
user_71293180
Related