SwiftUI：尝试实现滚动视图时出现问题

Question

我正在 SwiftUI 上开发一个应用程序。一切正常，直到我尝试将代码包装在滚动视图中。问题是我在 ZStack 中的第一个图像在嵌套在滚动视图中后自动在顶部留下一些空间。

滚动视图之前： [

滚动视图后：

这是我的代码：

import SwiftUI

struct SelectedSalonPage: View {
    var body: some View {
        ScrollView {
            VStack{
                ZStack{
                    Image("salongdrömaura")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .edgesIgnoringSafeArea([.top])
                    
                    HStack{
                        
                        Circle()
                            .fill(Color.black.opacity(0.5))
                            .frame(width: 40)
                            .overlay(
                                Image(systemName: "chevron.left")
                                    .foregroundColor(.white)
                            )
                            .padding(.top, -150)
                            .padding()
                        Spacer()
                        Circle()
                            .fill(Color.black.opacity(0.5))
                            .frame(width: 40)
                            .overlay(
                                Image(systemName: "square.and.arrow.up")
                                    .foregroundColor(.white)
                            )
                            .padding(.top, -150)
                        Circle()
                            .fill(Color.black.opacity(0.5))
                            .frame(width: 40)
                            .overlay(
                                Image(systemName: "heart")
                                    .foregroundColor(.white)
                            )
                            .padding(.top, -150)
                            .padding()
                        
                    }
                    
                }
                
                
                VStack{
                    ZStack{
                        Rectangle()
                            .foregroundColor(.white)
                        VStack {
                            
                            HStack{
                                Text("Salong Dröm Aura")
                                    .font(.title)
                                    .fontWeight(.semibold)
                                Circle()
                                    .fill(Color.purple.opacity(0.8))
                                    .frame(width: 55)
                                    .overlay(
                                        Image("instalogo")
                                            .resizable()
                                            .scaledToFit()
                                            .frame(width: 25)
                                    )
                                
                            }
                            VStack(alignment: .leading){
                                HStack{
                                    Image("placemark")
                                    Text("Huvudstagatan 12 - Solna")
                                        .fontWeight(.medium)
                                    
                                }
                                
                                HStack{
                                    Image(systemName: "star.fill")
                                    Text("Läs recensioner (6)")
                                        .fontWeight(.medium)
                                    
                                }
                                
                                HStack{
                                    Text("💵")
                                    Text("Snittpris: 370 kr")
                                        .fontWeight(.medium)
                                    
                                }
                                HStack{
                                    Circle()
                                        .stroke(lineWidth: 7)
                                        .foregroundColor(.purple)
                                        .rotationEffect(Angle(degrees: 270))
                                        .frame(width: 50)
                                        .overlay(
                                            Text("10")
                                                .foregroundColor(.purple)
                                                .fontWeight(.bold)
                                                .font(.title2)
                                        )
                                    Text("Snurra hjulet!!")
                                        .fontWeight(.semibold)
                                    Image(systemName: "chevron.right")
                                }
                            }
                            
                        }
                        
                    }
                    
                    
                    ZStack{
                        Rectangle()
                            .foregroundColor(.white)
                            .frame(height: 170)
                        
                        VStack(alignment: .leading){
                            HStack{
                                Image("SweBarberMini")
                                    .resizable()
                                    .padding(.leading)
                                    .frame(width: 60, height: 40)
                                Text("Köp ett presentkort med värde av:")
                                    .fontWeight(.bold)
                            }
                            
                            ScrollView(.horizontal) {
                                HStack(spacing: 15){
                                    TimeBookingRectangle()
                                        .padding(.leading)
                                    TimeBookingRectangle()
                                    TimeBookingRectangle()
                                    TimeBookingRectangle()
                                    TimeBookingRectangle()
                                        .padding(.trailing)
                                }
                            }
                            
                        }
                        
                        
                    }
                    
                }
                
                
            } .background(Color(red: 0.88, green: 0.88, blue: 0.88))
        }
    }
}

我尝试了不同的方法来查看导致此问题的原因，例如删除edgesignoringsafeare、删除我的VStack、将我的scrollView放在我的VStack中等等。

Answer 1

.edgesIgnoringSafeArea

已弃用，因此建议替换为

.ignoresSafeArea

。

也尝试将其添加到

ScrollView

：

var body: some View {
    ScrollView {
        // content as before
    }
    .ignoresSafeArea(edges: .top) // <- HERE
}