我有问题的滚动视图。当我把它放在我的代码如下,我有很大的空白之间的顶部视图,和底部滚动视图。如何删除它?有人能帮助我吗?
下面是我的代码:
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个按钮,所以它应该是可滚动的
1条答案
按热度按时间iyr7buue1#
您可以通过在视图中添加一个
.border
来查看问题所在,例如:这表明白色位于
HeaderView
:这是由
.ignoresSafeArea()
修饰符引起的删除该修饰符后得到: