I have a Horizontal ScrollView with some Content received from an API. However, when I scroll the Content, after a certain amount of Scrolling, the content shrinks. Is there a way to prevent this? The 2nd Image shows the content Shrinking after scrolling.
My Code is as Follows:
ScrollView(.horizontal){
LazyHStack(alignment:.center, spacing: 5){
ForEach(recipe?.extendedIngredients ?? [], id: \.self){ extendedIngredient in
VStack(spacing:4){
AsyncImage(url: URL(string: "https://spoonacular.com/cdn/ingredients_100x100/" + (extendedIngredient.image ?? "apple.jpg") )) { image in
image
.resizable()
.scaledToFit()
//.frame(width:100, height: 100)
} placeholder: {
ProgressView()
.tint(.gray)
}
Text(extendedIngredient.name ?? "Unknown")
}//Inner VStack
}//ForEach
}
}//Inner ScrollView
Update-- I added a frame modifier with a Height of 150 to the LazyHStack and that seemed to have solved the issue. However, is the the right way to get around this issue?