SwiftUI 删除视图上的空格答案

【问题标题】：SwiftUI removing a space on the viewSwiftUI 删除视图上的空格
【发布时间】：2020-06-17 01:54:56
【问题描述】：

在可能的 SwiftUI 视图中，我尝试显示一个简单的顶部蓝色条、一个红色矩形和一个下部条，正如您从所附图片中看到的那样，顶部有一个奇怪的空白区域和顶部的红色矩形我想删除的部分，但我不明白为什么会出现。

这里是简单的代码：

    var body: some View {

        GeometryReader { geometry in
            VStack {
                //upper top bar
                HStack{
                    Text("TOP BAR")

                }.frame(width: geometry.size.width, height: geometry.size.height/10)
                    .background(LinearGradient(gradient: Gradient(colors: [Color("BlueW"), Color("DARK")]), startPoint: .topLeading, endPoint: .bottomTrailing).shadow(radius: 2)).edgesIgnoringSafeArea(.all)

// <<<<<<<<<<<<<<<<<<< PROBLEM HERE <<<<<<<<<<<<<<<<<<
                // testing rectangle
                Rectangle().foregroundColor(.red)

                //lower bar
                ZStack {

                    HStack {
                        Image(systemName: "house")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .padding(20)
                            .frame(width: geometry.size.width/3, height: 75)
                            .foregroundColor(self.viewRouter.currentView == "home" ? .black : .gray)
                            .onTapGesture {
                                self.viewRouter.currentView = "home"
                        }
                        ZStack {
                            Circle()
                                .foregroundColor(Color.white)
                                .frame(width: 75, height: 75)
                            Button(action: {
                                self.isAddPresented = true
                            }) {
                                Image(systemName: "plus.circle.fill")
                                    .resizable()
                                    .aspectRatio(contentMode: .fit)
                                    .frame(width: 75, height: 75)
                                    .foregroundColor(.green)
                                    .rotationEffect(Angle(degrees: self.showPopUp ? 90 : 0))
                            }
                            .sheet(isPresented: self.$isAddPresented) {
                                AirportView(dm: self.dm, airport: self.general.airportData, dismissFlag: self.$isAddPresented)

                            }
                        }

                        .offset(y: -geometry.size.height/10/2)
                        .onTapGesture {
                            withAnimation {
                                self.showPopUp.toggle()
                            }

                        }
                        Image(systemName: "paperplane.fill")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .padding(20)
                            .frame(width: geometry.size.width/3, height: 75)
                            .foregroundColor(self.viewRouter.currentView == "routekit" ? .black : .gray)
                            .onTapGesture {
                                self.viewRouter.currentView = "routekit"
                        }

                    }.frame(width: geometry.size.width, height: geometry.size.height/10)
                        .background(LinearGradient(gradient: Gradient(colors: [Color("BlueW"), Color("DARK")]), startPoint: .topLeading, endPoint: .bottomTrailing).shadow(radius: 2))
                }
            }

        }.edgesIgnoringSafeArea(.bottom)
    }

【问题讨论】：

标签： ios swift xcode uiview swiftui

【解决方案1】：

问题在于 HStack 的边缘忽略了所有安全区域 (.edgesIgnoringSafeArea(.all))。

如您所见，如果您检查视图，您的绿色视图 (HStack) 实际上在 GeometryReader 内部，但它的框架在外部。

解决方法：删除.edgesIgnoringSafeArea(.all)。

新问题不过，顶部安全区域会有一个空白区域。

解决方案：

将GeometryReader 设置为.edgesIgnoringSafeArea([.top, .bottom])

瞧！

【讨论】：