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

【问题标题】：How can I present an overlay above the keyboard in SwiftUI?如何在 SwiftUI 中的键盘上方显示叠加层？
【发布时间】：2020-02-17 11:29:54
【问题描述】：

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

问题

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

问题

我怎样才能让这个叠加层成为最上面的视图？

出于显而易见的原因，我无法在键盘上使用 zIndex 修饰符。我想知道是否有办法让叠加层在即将呈现时成为顶视图，或者是否可以将叠加层添加到窗口中。

提前致谢

【问题讨论】：

标签： cocoa-touch swiftui ios13 ios13.1.2

【解决方案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 $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)
    }
}

【讨论】：

我最终展示了一个自动隐藏键盘的工作表，然后在它（工作表）被关闭后再次显示它。