I am trying to create two horizontal scrollable list of elements. Currently, this is what I am able to achieve:

As can be seen, I want to remove the space between the two Scroll Views. Here, is the code I am using to achieve this:

    var body: some View {
        NavigationView {
            VStack (spacing: 0){
                Text("Zara") .font(.custom(
                    "AmericanTypewriter",
                    fixedSize: 36))
                
                ScrollView (.horizontal){
                  
                    HorizontalScrollModel(searchResult: searchResults1)
                
                    
                    
                    
                }.task {
                    await loadData()
                }
                
              
                
                ScrollView (.horizontal){
                  
                    HorizontalScrollModel(searchResult: searchResults1)
                
                    
                    
                    
                }
                
            }
}
}

HorizontalScrollModel() returns a LazyHGrid of the products. I have tried setting the spacing to 0 with VStack (spacing: 0) but this did not work. How do I remove the space between the ScrollViews?

HorizontalScrollModel:

struct HorizontalScrollModel: View {
    

    var searchResults1: [homeResult]
    let columns  = [
        GridItem(.adaptive(minimum: 200))]
    
    @State private var isHearted = false


    
    init( searchResult: [homeResult]) {
        self.searchResults1 = searchResult
    
    }
    
    
    
    var body: some View {
        LazyHGrid (rows: columns ){

            ForEach(searchResults1, id: \.prodlink) { item in
                
                NavigationLink{
                    ProductView(imageLink: item.image_src, productLink: item.prodlink ,
                                productCost: String(item.price))
                } label: {
                    VStack (alignment: .leading, spacing: 0){
               
                        AsyncImage(url: URL(string: item.image_src)) { phase in
                            if let image = phase.image {
                                image
                                    .resizable()
                                    .scaledToFit()
                                    .frame(width: 150, height: 150)
                                    .clipShape(RoundedRectangle(cornerRadius: 10))
                                
                            } else if phase.error != nil {
                                Text("There was an error loading the image.")
                            } else {
                                ProgressView()
                            }
                        }
                        .padding()
                                .overlay(
                                    RoundedRectangle(cornerRadius: 10)
                                        .stroke(.gray.opacity(0.2), lineWidth: 4)
                                )
                                .padding(.top, 2)
                                .padding(.bottom, 2)

                                .padding(.leading, 2)

                                .padding(.trailing, 2)

                                .overlay (
                                    RoundedRectangle(cornerRadius: 12)
                                        .stroke(.gray.opacity(0.3), lineWidth: 1))


                            
                    

                    }
               
              


                }


            }
//                    .padding([.horizontal, .bottom])
            

        }
    }
}

CodePudding user response：

Each ScrollView takes all available space offered by VStack, which since it has 2 views will be half the screen for each view.

Inside each ScrollView you then place a LazyHGrid, and inside the cell you are placing a 150x150 image, but the ScrollView size will not change to fit the image.

So, it now depends on what you're aiming for. If you just want the two ScrollView to be joined together, you can have a .frame modified to the outer VStack with a height of 308 (150 for each image the padding).

CodePudding user response：

Try adding the .fixedSize() modifier to the ScrollView:

ScrollView(.horizontal) {
    HorizontalScrollModel(searchResult: searchResults1)
}
.fixedSize(horizontal: false, vertical: true)

You might also be able to add it just to the HorizontalScrollModel.