Как представить оверлей над клавиатурой в SwiftUI? - PullRequest
Новая
       84

Как представить оверлей над клавиатурой в SwiftUI?

1 голос
/ 21 октября 2019

В моем приложении есть экран, который автоматически отображает клавиатуру при отображении экрана. Экран позволяет пользователям вводить номер своего мобильного телефона. Чтобы выбрать телефонный код, пользователь должен нажать кнопку, которая затем вызовет представление наложения.

Проблема

Представляется наложение,но он появляется за нынешней клавиатурой.

Вопрос

Как сделать так, чтобы это наложение было самым верхним видом?

Я не могу использовать модификатор zIndex наклавиатура по понятным причинам. Мне интересно, есть ли способ сделать наложение в виде сверху, когда оно должно быть представлено, или можно добавить наложение в окно.

Заранее спасибо

1 Ответ

1 голос
/ 21 октября 2019

Вероятно, в любой момент времени у вас должен быть только один источник ввода - либо должна быть представлена ​​клавиатура для ввода номера, либо должно быть наложение, чтобы выбрать код набора, а не оба. Вот пример, который скрывает клавиатуру, когда появляется оверлей, и наоборот. (Код отклонения клавиатуры от этого ответа .) 

struct ContentView: View {
    @State private var number = ""
    @State private var showingOverlay = false

    var body: some View {
        GeometryReader { proxy in
            ZStack(alignment: .top) {
                // Just here to force ZStack to use the whole screen
                Rectangle()
                    .fill(Color.clear)

                VStack(alignment: .leading) {
                    Button("Select Dialing Code") {
                        UIApplication.shared.endEditing()
                        self.showingOverlay = true
                    }
                    TextField("Enter your number", text: self.$number, onEditingChanged: {
                        if $0 { self.showingOverlay = false }
                    })
                        .keyboardType(.phonePad)
                }

                Overlay(showing: self.$showingOverlay)
                    .frame(height: 400)
                    .offset(x: 0, y: proxy.size.height + (self.showingOverlay ? -300 : 100))
                    .animation(.easeInOut)
            }
        }
    }
}

struct Overlay: View {
    @Binding var showing: Bool

    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 15)
                .fill(Color(.systemGray4))
            Button("Dismiss") {
                self.showing = false
            }
        }
    }
}

extension UIApplication {
    func endEditing() {
        sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
    }
}
...