SwiftUI 当键盘出现时避免TextField被遮挡自动向上

如果您遇到了上面的问题，那恭喜您！您现在应该已经过了新手期，正式进入了成为了一名iOS开发者。开发者每遇到一个问题，就像到于遇到一个怪兽，干掉这个”野“，您的经验值会上涨一大截。

阅读本文您的收获

• 学会创建一个可以包裹其他View的View
• 学会响应键盘弹出与隐藏的事件
• 学会使用ScrollView

最终效果

TextField自动向上移动

问题介绍

在我的主要内容视图中有七个文本字段。当用户打开键盘时，某些 TextField 隐藏在键盘框架下。如何键盘出现时分别向上移动所有 TextField呢？

下面是有问题的代码

struct DemoTF01 : View {
    @State var textfieldText: String = ""
    
    var body: some View {
        VStack {
            Group{
                Text("Title")
                                  .font(.largeTitle)
                              Text("Title")
                                  .font(.largeTitle)
                              Text("Title")
                                  .font(.largeTitle)
                              Text("Title")
                                  .font(.largeTitle)
                              Text("Title")
                                  .font(.largeTitle)
            }
            TextField( "textfieldText", text: $textfieldText)
                .textFieldStyle(RoundedBorderTextFieldStyle())
            TextField( "textfieldText", text: $textfieldText)
                .textFieldStyle(RoundedBorderTextFieldStyle())
            TextField( "textfieldText", text: $textfieldText)
                .textFieldStyle(RoundedBorderTextFieldStyle())
            TextField( "textfieldText", text: $textfieldText)
                .textFieldStyle(RoundedBorderTextFieldStyle())
            TextField( "textfieldText", text: $textfieldText)
                .textFieldStyle(RoundedBorderTextFieldStyle())
            TextField( "textfieldText", text: $textfieldText)
                .textFieldStyle(RoundedBorderTextFieldStyle())
            
        }
    }
}

Jietu20200221-074850@2x.jpg

解决方法

我创建了一个视图，该视图可以包装任何其他视图,当键盘出现时缩小它。我们为键盘显示/隐藏事件创建发布者，然后使用 onReceive 订阅它们。该结果在键盘后面创建一个键盘大小的矩形