swiftui -滚动视图上方的大空白-如何删除它?

x33g5p2x  于 2023-02-18  发布在  Swift
关注(0)|答案(1)|浏览(192)

我有问题的滚动视图。当我把它放在我的代码如下,我有很大的空白之间的顶部视图,和底部滚动视图。如何删除它?有人能帮助我吗?

下面是我的代码:

import SwiftUI

struct HeaderView: View {
    var body: some View {
        VStack {
            Image("photo")
                .resizable()
                .scaledToFill()
                .frame(width: 110, height: 110)
                .clipShape(Circle())
                .overlay(Circle().stroke(Color.orange, lineWidth: 3))
            Text("Michael Novak")
                .foregroundColor(.white)
                .font(.system(size: 20, weight: .medium, design: .rounded))
            Text("Welcome to my portfolio")
                .foregroundColor(.white)
                .font(.system(size: 18, weight: .medium, design: .rounded))
        }
        .frame(height: 350)
        .frame(maxWidth: .infinity)
        .background(Color.purple)
        .ignoresSafeArea()
    }
}

enum ButtonTypes: CaseIterable {
    case about, education, gallery, more, more1, more2
    
    var title: String {
        switch self {
        case .about: return "About"
        case .education: return "Education"
        case .gallery: return "Gallery"
        case .more: return "School"
        case .more1: return "Apps"
        case .more2: return "Calculator"

        }
    }
}
struct ContentView: View {

    let columns = [
        GridItem(.flexible()),
        GridItem(.flexible())
    ]
    
    var body: some View {
                NavigationStack{
                HeaderView()
                ScrollView {
                    LazyVGrid(columns: columns) {
                        ForEach(ButtonTypes.allCases, id: \.self) { type in
                            NavigationLink(type.title) {
                                switch type {
                                case .about:
                                    AboutView()
                                case .education:
                                    EducationView()
                                case .gallery:
                                    GalleryView()
                                case .more:
                                    FourthView()
                                case .more1:
                                    FourthView()
                                case .more2:
                                    FourthView()

                                }
                            }
                            
                            .frame(height: 50)
                            .frame(minWidth: 100)
                            .foregroundColor(.red)
                            .padding()
                            .background(Color.black)
                            .cornerRadius(5)

                    }
                        
                }
            }
        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

当我删除scrollview它是确定的,空间之间是非常小的.但我想有像20个按钮,所以它应该是可滚动的

iyr7buue

iyr7buue1#

您可以通过在视图中添加一个.border来查看问题所在,例如:

var body: some View {
    NavigationStack{
        HeaderView()
            .border(.red)
        ScrollView {
            // etc
        }
        .border(.blue)
    }
}

这表明白色位于HeaderView

这是由.ignoresSafeArea()修饰符引起的
删除该修饰符后得到:

相关问题