提问者:小点点

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


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

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