无法删除SwiftUI中两个水平滚动视图之间的空间?

mnemlml8  于 2023-01-16  发布在  Swift
关注(0)|答案(2)|浏览(155)

我正在尝试创建两个水平滚动的元素列表。目前,这是我能够实现的:

如图所示,我想删除两个滚动视图之间的空间。下面是我用来实现这一点的代码:

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()返回产品的LazyHGrid。我曾尝试使用VStack (spacing: 0)将间距设置为0,但不起作用。如何删除ScrollView之间的间距?
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])
            

        }
    }
}
inkz8wg9

inkz8wg91#

每个ScrollView占用VStack提供的所有可用空间,因为它有2个视图,每个视图将占用一半屏幕。
在每个ScrollView中放置一个LazyHGrid,在单元格中放置一个150x150的图像,但是ScrollView的大小不会改变以适合图像。
所以,现在这取决于你的目标是什么。如果你只是想把两个ScrollView连接在一起,你可以把.frame修改成外部的VStack,高度为308(每个图像150+填充)。

wbgh16ku

wbgh16ku2#

尝试将.fixedSize()修改器添加到ScrollView

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

您也可以将它添加到HorizontalScrollModel中。

相关问题