You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.03 21:00:58