SwiftUI中ScrollView内MarkupEditorView的键盘适配及聚焦问题
问题解决方案
以下是针对你遇到的三个问题的修复代码及说明:
struct ContentView: View { @State private var demoHtml: String = "<h1>Hello World</h1>" @FocusState private var isEditorFocused: Bool var body: some View { GeometryReader { _ in VStack(spacing: 0) { ScrollView { LazyVStack { ForEach(0..<50) { _ in Text("Editor needs improvement") } VStack { MarkupEditorView(html: $demoHtml) .focused($isEditorFocused) } .frame(minHeight: 200, maxHeight: 200) .overlay( RoundedRectangle(cornerRadius: 6.0) .stroke(.gray, lineWidth: 1.0) ) .padding() } } .adjustsKeyboardInsetsToSafeArea(true) .scrollDismissesKeyboard(.interactively) Spacer(minLength: 0) Button("Tap", action: { isEditorFocused = false }) .background(.green) .padding() } } .ignoresSafeArea(.keyboard, edges: .bottom) .onAppear { isEditorFocused = false } } }
问题1:ScrollView内编辑器聚焦后不随键盘上移
- 为ScrollView添加
.adjustsKeyboardInsetsToSafeArea(true),系统会自动根据键盘高度调整ScrollView的内边距,确保聚焦的编辑器始终处于可视范围。 - 搭配
.scrollDismissesKeyboard(.interactively),支持滑动ScrollView时关闭键盘,优化交互体验。
问题2:视图加载时键盘自动弹出
- 引入
@FocusState变量绑定编辑器的聚焦状态,通过.focused($isEditorFocused)手动控制。 - 在
.onAppear中设置isEditorFocused = false,避免视图初始化时编辑器自动聚焦触发键盘弹出。
问题3:底部按钮被键盘顶起
- 用
GeometryReader包裹布局,结合VStack内的Spacer(minLength: 0)将按钮固定在屏幕底部。 - 添加
.ignoresSafeArea(.keyboard, edges: .bottom),让底部区域不受键盘安全区域影响,按钮保持固定位置。 - 按钮点击事件中添加
isEditorFocused = false,点击时自动收起键盘,提升操作流畅度。
内容的提问来源于stack exchange,提问作者Vikash Kumar Chaubey
相关产品推荐
相关产品推荐

