Question 66852 in IOS Swift Question posted in
The official documentation can be found here.

Unable to remove space between two Horizontal Scroll views in SwiftUI? – Ios swift

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

enter image description here

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])
            

        }
    }
}
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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 150×150 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).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search