我的应用程序中有一个屏幕,当屏幕出现时会自动显示键盘。该屏幕允许用户输入他们的手机号码。为了选择拨号代码,用户需要点击一个按钮,然后触发覆盖的呈现。
问题
叠加层正在呈现,但它显示在当前存在的键盘后面。
问题
我怎样才能使这个叠加层成为最顶层的视图?
由于显而易见的原因,我无法在键盘上使用 zIndex 修饰符。我想知道是否有一种方法可以在即将呈现时使覆盖层成为顶视图,或者是否可以将覆盖层添加到窗口中。
提前致谢
我的应用程序中有一个屏幕,当屏幕出现时会自动显示键盘。该屏幕允许用户输入他们的手机号码。为了选择拨号代码,用户需要点击一个按钮,然后触发覆盖的呈现。
问题
叠加层正在呈现,但它显示在当前存在的键盘后面。
问题
我怎样才能使这个叠加层成为最顶层的视图?
由于显而易见的原因,我无法在键盘上使用 zIndex 修饰符。我想知道是否有一种方法可以在即将呈现时使覆盖层成为顶视图,或者是否可以将覆盖层添加到窗口中。
提前致谢
在任何给定时间,您可能应该只有一个输入源——或者应该显示键盘来输入数字,或者应该显示覆盖层来选择拨号代码,而不是两者兼而有之。这是一个在覆盖出现时隐藏键盘的示例,反之亦然。(此答案中的键盘关闭代码。)
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)
}
}