如何在 SwiftUI 的键盘上方显示叠加层？

Question

我的应用程序中有一个屏幕，当屏幕出现时会自动显示键盘。该屏幕允许用户输入他们的手机号码。为了 select 拨号代码，用户需要点击一个按钮，该按钮随后会触发叠加层的显示。

问题

正在显示叠加层，但它显示在当前存在的键盘后面。

问题

如何使这个叠加层成为最顶层视图？

由于显而易见的原因，我无法在键盘上使用 zIndex 修饰符。我想知道是否有一种方法可以在即将呈现时将叠加层设置为顶视图，或者是否可以将叠加层添加到 window.

提前致谢

Answer 1

在任何给定时间，您可能应该只有一个输入源 — 要么出示键盘以输入数字，要么出示覆盖图以选择拨号代码，而不是两者。这是一个在出现覆盖时隐藏键盘的示例，反之亦然。（来自 this answer 的键盘关闭代码。）

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 [=10=] { 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)
    }
}

如何在 SwiftUI 的键盘上方显示叠加层？

How can I present an overlay above the keyboard in SwiftUI?

cocoa-touch

swiftui

ios13

ios13.1.2