SwiftUI中ScrollView内TextField聚焦时如何让下方按钮同步可见

核心逻辑是接管输入框获焦后的滚动控制，替代系统默认仅保证输入框露出的滚动行为，让滚动终点覆盖输入框+下方按钮区域。 #

推荐方案：ScrollViewReader 绑定焦点状态（适配iOS 15及以上） #

这个方案稳定性最高，不会出现键盘遮挡、滚动跳变问题，实现步骤如下：

• 给输入框、底部按钮容器分别绑定唯一的视图ID
• 通过@FocusState监听输入框的焦点变化
• 输入框获焦时，等待极短时间让系统默认的键盘弹出、自动滚动逻辑执行完毕，再主动控制ScrollView滚动到按钮区域位置，锚点对齐可视区底部，就能同时露出输入框和提交按钮

对应实现代码：

// 定义滚动位置标识，避免硬编码id出错
private enum ViewID {
    case inputTextField
    case submitButtonArea
}

struct YourPageView: View {
    @FocusState private var isInputActive: Bool
    @State private var inputContent: String = ""
    
    var body: some View {
        ScrollViewReader { scrollProxy in
            ScrollView {
                VStack(spacing: 16) {
                    // 此处省略大量列表条目内容
                    
                    TextField("请输入内容", text: $inputContent)
                        .id(ViewID.inputTextField)
                        .focused($isInputActive)
                        .textFieldStyle(.roundedBorder)
                        .padding(.horizontal)
                    
                    // 底部提交按钮区域
                    VStack(spacing: 12) {
                        Text("提交前请确认输入内容符合要求")
                            .font(.footnote)
                            .foregroundColor(.gray)
                        Button("确认提交") {
                            onSubmitRequested()
                        }
                        .buttonStyle(.borderedProminent)
                    }
                    .id(ViewID.submitButtonArea)
                    .padding(.bottom, 24) // 预留底部边距，避免按钮贴边
                }
            }
            .scrollDismissesKeyboard(.interactively)
            .onChange(of: isInputActive) { isFocused in
                guard isFocused else { return }
                // 延迟0.1秒等待系统默认滚动/键盘弹出动画执行，避免自定义滚动被系统逻辑覆盖
                DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
                    withAnimation(.easeInOut(duration: 0.25)) {
                        // 滚动到按钮区域，以区域底部为锚点对齐可视区底部，保证按钮完全露出
                        scrollProxy.scrollTo(ViewID.submitButtonArea, anchor: .bottom)
                    }
                }
            }
        }
    }
    
    func onSubmitRequested() {
        // 你的提交业务逻辑
        isInputActive = false
    }
}

低版本兼容方案（iOS15以下） #

如果需要适配更早的系统版本，可以通过动态调整ScrollView内容边距实现：

• 监听系统键盘弹出/收起通知，获取键盘实际高度
• 输入框获焦时，给ScrollView的内容容器增加动态底部padding，padding值 = 键盘高度 + 按钮区域高度 + 20pt预留间距
• 系统默认滚动到输入框位置时，因为底部内容被padding抬高，按钮会自动落在键盘上方的可视区域内，不需要手动触发滚动

注意避坑 #

• 不要在输入框刚获焦时立刻触发自定义滚动，否则会和系统自带的自动滚动逻辑冲突，出现位置跳变、动画错乱的问题，0.05~0.15s的延迟区间体验最好
• 如果用了自定义键盘工具栏，记得把工具栏高度也算进底部边距里，避免按钮被工具栏挡住
• 滚动时的动画时长和系统键盘弹出时长（约0.25s）对齐，交互会更自然

内容的提问来源于stack exchange，提问作者Tobonaut