1

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

问题

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

问题

我怎样才能使这个叠加层成为最顶层的视图?

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

提前致谢

4

1 回答 1

1

在任何给定时间,您可能应该只有一个输入源——或者应该显示键盘来输入数字,或者应该显示覆盖层来选择拨号代码,而不是两者兼而有之。这是一个在覆盖出现时隐藏键盘的示例,反之亦然。(此答案中的键盘关闭代码。)

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)
    }
}
于 2019-10-21T16:39:44.650 回答