【问题描述】
在使用SwiftUi增加了TextView,并且TextView的下半部分位于屏幕的下半侧,在模拟器中调试时发现,点击TextView后,弹出的键盘直接遮挡了输入框,导致部分输入不可见。
| 正常状态 | 输入中 |
| --- | --- |
| http://img.leozhou.me/picGo/20200920234824.png | http://img.leozhou.me/picGo/20200920234715.png |

由上图对比可知,键盘会影响TextView的输入体验。

【解决方案】

  1. 增加键盘显示和关闭的监听器
struct NoteItemView: View {

@State var keyboardOffsetHeight:CGFloat = 0

var body: some View {
        VStack(spacing: 10){
// ...other codes
            TextView(text: $content)
                //                .border(Color.gray)
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color.gray)
            )
                .disabled(self.isEditable())
// ...other codes
        }.padding()
            .onAppear {
// ...other codes

// 增加键盘即将显示的通知监听器,如果收到通知,则设置变量「keyboardOffsetHeight」为键盘高度                NotificationCenter.default.addObserver(forName: UIResponder.keyboardWillShowNotification, object: nil, queue: .main) { (noti) in
                    let value = noti.userInfo![UIResponder.keyboardFrameEndUserInfoKey] as! CGRect
                    let height = value.height
                    
                    self.keyboardOffsetHeight = height
                }
// 增加键盘即将隐藏的通知监听器,如果收到通知,则设置变量「keyboardOffsetHeight」为0
                NotificationCenter.default.addObserver(forName: UIResponder.keyboardWillHideNotification, object: nil, queue: .main) { (noti) in
                    self.keyboardOffsetHeight = 0
                }
                
        }
        
    }
}
  1. 增加输入框底部与页面底部的间隔
    i. 通过offset的方式增加键盘的空间
struct NoteItemView: View {

@State var keyboardOffsetHeight:CGFloat = 0

var body: some View {
        VStack(spacing: 10){

// ...other codes
        }.offset(y: -self.keyboardOffsetHeight:CGFloat)
	.animation(.spring())
	.padding()
            .onAppear {
// ...other codes
        }
        
    }
}

以上的方式会将整个输入框往上移动,这个适用于当行的TextView进行编辑输入时使用,如果是多行输入框,会导致整个输入框别顶出屏幕。

ii. 通过padding的方式增加间隔来提供键盘的空间

struct NoteItemView: View {

@State var keyboardOffsetHeight:CGFloat = 0

var body: some View {
        VStack(spacing: 10){

// ...other codes
        }.padding([.bottom], self.keyboardOffsetHeight)
            .onAppear {
// ...other codes
        }
        
    }
}

以上的方式只移动整个界面的底边距离底部的高度,在界面存在空余高度的情况下,可以使TextView的空间底部高于输入框,从而使输入时更为便利。
效果如下:
image.png

【参考】
Moving TextField Up When Keyboard Appears Using SwiftUI - Moving Views Over The Keyboard In SwiftUI