我正在尝试做一个像Instagram的UI来练习。当我添加一个NavigationView时,它会在屏幕的四个边创建一个空边框。下面是UI的样子-
下面是我的代码。我可能做错了什么?
var body: some View {
NavigationView {
ScrollView(.vertical, showsIndicators: false) {
ScrollView(.horizontal, showsIndicators: false) {
HStack {
ForEach(MockData().stories) {
StoryView(story: $0)
}
}
}
ForEach(MockData().posts) {
PostView(post: $0, screenWidth: UIScreen.main.bounds.size.width)
}
}
.navigationBarTitle("", displayMode: .inline)
.toolbar(content: {
ToolbarItem(placement: .navigationBarLeading) {
Image("instagram")
.resizable()
.renderingMode(.template)
.scaledToFit()
.frame(width: 130)
}
ToolbarItem(placement: .navigationBarTrailing) {
HStack {
Image(systemName: "plus.square.on.square")
.resizable()
.frame(width: 25, height: 25)
.padding(.trailing, 10)
Image(systemName: "message")
.resizable()
.frame(width: 25, height: 25)
}
}
})
}
}
您可以使用:
.EdgesIgnoringSafeArea(.all)
之后,将删除NavigationView的关闭大括号和填充。如果您也想删除导航栏,那么通过放置.NavigationBarHidden(true)来执行相同的操作
因此,您用于删除填充的代码将是:
var body: some View {
NavigationView {
ScrollView(.vertical, showsIndicators: false) {
ScrollView(.horizontal, showsIndicators: false) {
HStack {
ForEach(MockData().stories) {
StoryView(story: $0)
}
}
}
ForEach(MockData().posts) {
PostView(post: $0, screenWidth: UIScreen.main.bounds.size.width)
}
}
.navigationBarTitle("", displayMode: .inline)
.toolbar(content: {
ToolbarItem(placement: .navigationBarLeading) {
Image("instagram")
.resizable()
.renderingMode(.template)
.scaledToFit()
.frame(width: 130)
}
ToolbarItem(placement: .navigationBarTrailing) {
HStack {
Image(systemName: "plus.square.on.square")
.resizable()
.frame(width: 25, height: 25)
.padding(.trailing, 10)
Image(systemName: "message")
.resizable()
.frame(width: 25, height: 25)
}
}
})
}.edgesIgnoringSafeArea(.all)
}