ios - 当键盘出现在垂直 ScrollView SwiftUI 内的水平 ScrollView 中时，向上移动 TextField

Question

前段时间有一个相关的问题： Move TextField up when the keyboard has appear in SwiftUI

看来之前的问题已经解决了。但是，如果我们将 VStack 放在一个 ScrollView 中。SwiftUI 似乎忽略了键盘安全区域并将滚动视图保留在键盘后面。使用一个垂直滚动视图和一个文本字段，我们仍然可以获得所需的行为，滚动视图向上滚动到文本字段。如果我们在垂直滚动视图中使用水平滚动视图，就会出现问题。滚动视图不会向上移动以使文本字段可见。有谁知道如何解决这个问题？

struct ContentView: View {
    
    @State var text = ""
    
    var body: some View {
        
        ScrollView(.vertical, showsIndicators: false) {
            VStack {
                
                ForEach(0..<10) {_ in
                    
                    ScrollView(.horizontal, showsIndicators: false) {
                        HStack(spacing: 20) {
                            ForEach(0..<10) {_ in
                                
                                VStack {
                                    Rectangle()
                                        .fill(Color.red)
                                        .frame(width: 500, height: 300)
                                    TextField("Test", text: $text)
                                    
                                }
                            }
                        }
                    }
                    
                }
            }
            
        }
        
    }
}

Answer 1

尝试创建视图扩展：

extension View {

    func keyboardSensible(_ offsetValue: Binding<CGFloat>, contentHeight: CGFloat) -> some View {
        return self
            .padding(.bottom, offsetValue.wrappedValue)
            .animation(.spring())
            .onAppear {
                NotificationCenter.default.addObserver(forName: UIResponder.keyboardWillShowNotification, object: nil, queue: .main) { notification in

                    let keyWindow = UIApplication.shared.connectedScenes
                        .filter({$0.activationState == .foregroundActive})
                        .map({$0 as? UIWindowScene})
                        .compactMap({$0})
                        .first?.windows
                        .filter({$0.isKeyWindow}).first

                    let userFrame = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect ?? .zero
                    
                    offsetValue.wrappedValue = userFrame.height
                }

                NotificationCenter.default.addObserver(forName: UIResponder.keyboardWillHideNotification, object: nil, queue: .main) { _ in
                    offsetValue.wrappedValue = 0
                }
        }
    }
}

内容调整的使用示例：

    @State private var offsetValue: CGFloat = 0.0


    var body: some View {
        GeometryReader { geometryReader in
            VStack {
        ...
        
        }.keyboardSensible(self.$offsetValue, contentHeight: geometryReader.size.height)

Answer 2

我只是有一些关于这个问题的额外信息，而不是解决方案。如果将 TextFiled 放在第一个 ScrollView 中，它确实会避开键盘。也许此信息可以帮助某人解决它：

''' 结构内容视图：查看 {

@State var text = ""

var body: some View {
    
    ScrollView(.vertical, showsIndicators: false) {
        VStack {
            
            ForEach(0..<10) {_ in
                VStack {
                  ScrollView(.horizontal, showsIndicators: false) {
                    HStack(spacing: 20) {
                        ForEach(0..<10) {_ in
                            
                            VStack {
                                Rectangle()
                                    .fill(Color.red)
                                    .frame(width: 500, height: 300)
                                
                            }
                        }
                    }
                  }
                  TextField("Test", text: $text)
                }
                
                
            }

        }
        
    }
    
}

} '''