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 订阅它们。该结果在键盘后面创建一个键盘大小的矩形

还有 47% 的精彩内容

推荐阅读更多精彩内容