Как я могу использовать edgeIgnoringSafeArea в SwiftUI, но сделать так, чтобы дочерний вид соблюдал безопасную область?

Question

Я создаю пользовательский интерфейс SwiftUI с представлением списка, и я хочу разместить панель над частью представления списка с кнопкой на нем.

На устройствах с безопасной областью внизу (у него нет физической кнопки «Домой») Я хочу, чтобы панель была go в нижней части экрана. Но я хочу убедиться, что кнопка на панели не распространяется в безопасную область.

В моем примере кода HStack - это панель с кнопкой. Я попытался добавить .edgesIgnoringSafeArea(.bottom) к нему, но это не позволяет ему расширяться до самого дна. Это немного смущает меня, потому что список, который находится в том же ZStack, распространяется в нижнюю безопасную область.

Когда я добавляю .edgesIgnoringSafeArea(.bottom) к ZStack, HStack (синяя панель ) разрешено распространяться в безопасную зону внизу экрана. Это то, что я хочу, но когда я это сделаю, как я могу сказать Button, что это ребенок от HStack до , а не игнорировать безопасную область?

Я знаю, как бы это сделать в UIKit, но я очень надеюсь, что смогу построить этот интерфейс в SwiftUI. Я мог бы вручную добавить некоторые отступы или разделители, чтобы добавить дополнительные отступы под Button для учета безопасной области, но тогда было бы дополнительное расстояние на устройствах с кнопкой «Домой», которые не имеют нижней безопасной области. Я хотел бы найти элегантное решение, в котором я могу рассчитывать на то, что система определит ее безопасные области, вместо того, чтобы вручную определять какой-либо интервал численно или создавать условные ситуации для различных устройств.

struct ContentView: View {
    var body: some View {

        ZStack(alignment: .bottom) {

                    List {
                        Text("Item 1")
                        Text("Item 2")
                        Text("Item 3")
                    }

                    HStack {
                        Spacer()
                        Button(action: {
                            // do something
                        }){
                            Text("Button")
                                .font(.title)
                                .padding()
                                .background(Color.green)
                                .foregroundColor(.white)
                                .cornerRadius(15)
                        }.padding()
                        Spacer()
                    }.background(Color.blue).edgesIgnoringSafeArea(.bottom)
                }
    }
}

Answer 1

Вы можете получить доступ к высоте безопасной области, используя GeometryReader. Тогда вы можете использовать высоту безопасной области в качестве нижнего отступа или смещения на кнопке.
https://developer.apple.com/documentation/swiftui/geometryproxy

struct ContentView: View {
    var body: some View {

        GeometryReader { proxy in
            ZStack(alignment: .bottom) {

                List {
                    Text("Item 1")
                    Text("Item 2")
                    Text("Item 3")
                }

                HStack {
                    Spacer()
                    Button(action: {
                        // do something
                    }){
                        Text("Button")
                            .font(.title)
                            .padding()
                            .background(Color.green)
                            .foregroundColor(.white)
                            .cornerRadius(15)
                    }
                    .padding(.bottom, proxy.safeAreaInsets.top)
                    Spacer()
                }.background(Color.blue)
            }.edgesIgnoringSafeArea(.bottom)
        }
    }
}

Answer 2

Независимо от того, какое изображение вы рисуете в модификаторе фона, будет использоваться рамка изменяемого вида. Таким образом, вы должны указать этому виду игнорировать безопасную область.

.background(Color.blue.edgesIgnoringSafeArea(.bottom))