SwiftUI中键盘遮挡TextEditor问题：键盘未随编辑器下移

在SwiftUI开发中，自定义带占位符的TextEditor获取焦点弹出键盘时，视图不会自动下移，导致输入区域被键盘遮挡。

自定义TextEditor代码 #

struct TextEditorWithPlaceholder: View {
    @Binding var text: String
    var placeholder: String

    var body: some View {
        ZStack(alignment: .leading) {
            if text.isEmpty {
                VStack {
                    Text(placeholder)
                        .padding(.top, 10)
                        .padding(.leading, 6)
                        .opacity(0.6)
                    Spacer()
                }
            }

            VStack {
                TextEditor(text: $text)
                    .frame(minHeight: 70, maxHeight: 200)
                    .opacity(text.isEmpty ? 0.85 : 1)
                Spacer()
            }
        }
    }
}

使用示例 #

Section(header: Text("Additional info")) {
    TextEditorWithPlaceholder(text: $callDetails, placeholder: "placerholder text")
        .focused($infoField)
}

问题示意图 #

解决方法 #

• 用ScrollView包裹表单：SwiftUI的ScrollView会自动处理键盘弹出时的视图偏移，确保输入区域不被遮挡

ScrollView {
    Form {
        Section(header: Text("Additional info")) {
            TextEditorWithPlaceholder(text: $callDetails, placeholder: "占位文本")
                .focused($infoField)
        }
    }
}

• 优化自定义TextEditor布局：移除多余的Spacer，调整ZStack对齐方式，避免布局干扰键盘避让逻辑

struct TextEditorWithPlaceholder: View {
    @Binding var text: String
    var placeholder: String

    var body: some View {
        ZStack(alignment: .topLeading) {
            if text.isEmpty {
                Text(placeholder)
                    .padding(.top, 10)
                    .padding(.leading, 6)
                    .opacity(0.6)
                    .allowsHitTesting(false) // 防止占位文本拦截输入事件
            }
            TextEditor(text: $text)
                .frame(minHeight: 70, maxHeight: 200)
                .opacity(text.isEmpty ? 0.85 : 1)
        }
    }
}

• 添加键盘完成按钮：通过toolbar添加键盘完成按钮，方便用户主动隐藏键盘，提升交互体验

.toolbar {
    ToolbarItemGroup(placement: .keyboard) {
        Spacer()
        Button("完成") {
            infoField = false
        }
    }
}

内容的提问来源于stack exchange，提问作者Defaced.Face