skip to Main Content

I have a LazyHstack in a horizontal scrollview :

struct HorizontalSpotsList: View {
var spots: [Spot]

    var body: some View {
        ScrollView(.horizontal){
            LazyHStack(alignment: .center, spacing: 0){
                if (!spots.isEmpty){
                    ForEach(spots.prefix(upTo: 3) , id: .self) { spot in
                        Text("Test").frame(maxWidth: .infinity)
                            .background(RoundedRectangle(cornerRadius: 25)
                            .fill(Color.white)).border(Color.blue)
                    }
                }
            }.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity).border(Color.red)
        }.frame(width: .infinity, height: 130).border(Color.green)
    }

}

example

How can i get my lazyHStack elements to fill all the width screen ?

My LazyHstack doesn’t seems to fill the width, i tried to apply .frame(width: .infinity) or .frame(maxWidth: .infinity) to different combinaisons of my scrollView / LazyHstack / Text element but it doesn’t seems to work.

2

Answers


  1. You could use Geometry Reader. You would have to apply a height however.

    GeometryReader { geo in
    
        ScrollView {
    
            LazyHStack {
    
                content
    
            }.frame(width: geo.size.width, height: #)
    
        }
    }
    
    Login or Signup to reply.
  2. Try adding Spacer() in between the Text elements.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search