SwiftUI удаляет пробел в представлении - PullRequest
1 голос
/ 04 марта 2020

в мае. Представление SwiftUI. Я пытаюсь отобразить простую верхнюю синюю полосу, красный прямоугольник и нижнюю полосу, как вы можете видеть из прикрепленного изображения: странный белый пробел сверху и красный прямоугольник сверху часть, которую я хочу удалить, но я не понимаю, почему она есть.

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

1 Ответ

1 голос
/ 04 марта 2020

Проблема заключается в том, что HStack имеет края, игнорирующие всю безопасную область (.edgesIgnoringSafeArea(.all)).

enter image description here

Как видите, если вы проверяете свой вид, ваш зеленый вид (HStack) фактически находится внутри GeometryReader, но его рамка выходит наружу.

Решение: удалите .edgesIgnoringSafeArea(.all).

Новая проблема , однако, в верхней безопасной области будет пробел.

Решение:

Установите GeometryReader на .edgesIgnoringSafeArea([.top, .bottom])

Вуаля!

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...