Swiftui-NavigationView在屏幕的所有方面创建空空间

Question

我正在尝试做一个像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)
                }
            }
        })
    }
}

Answer 1

您可以使用：

.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)
}