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

【问题标题】：Move TextField up when the keyboard has appeared in horizontal ScrollView that is inside vertical ScrollView SwiftUI当键盘出现在垂直 ScrollView SwiftUI 内的水平 ScrollView 中时，向上移动 TextField
【发布时间】：2021-08-02 00:52:45
【问题描述】：

前段时间有一个相关的问题： Move TextField up when the keyboard has appeared 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)
                                    
                                }
                            }
                        }
                    }
                    
                }
            }
            
        }
        
    }
}

【问题讨论】：

标签： ios swiftui scrollview textfield vstack

【解决方案1】：

尝试为 View 创建扩展：

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)

【讨论】：

我得到 UIWindow has no member tabBarHeight

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

        }
        
    }
    
}

} '''

【讨论】：

我知道，只有在垂直滚动视图中才会出现问题。但是谢谢你，这可能对某人有帮助:)