SwiftUI 2.0 键盘避让时如何设置ScrollBar偏移避免TextField被截断

问题根因 #

系统原生的键盘自动避让逻辑仅保证TextField的文字输入区域不被键盘遮挡，不会计入你自定义的padding、背景、圆角等额外视图高度，因此会出现底部背景被截断的问题。

可行解决方案 #

可以通过ScrollViewReader配合FocusState手动控制滚动偏移，预留足够的底部展示空间，保证完整显示TextField的所有元素，修改后的代码如下：

import SwiftUI

struct ContentView: View {
    // 跟踪当前处于聚焦状态的TextField序号
    @FocusState private var focusedIndex: Int?
    var body: some View {
        VStack {
            ScrollViewReader { scrollProxy in
                ScrollView {
                    ForEach(0..<20, id: \.self) { i in
                        TextField("Textfield \(i)", text: .constant(""))
                            .padding()
                            .background(Color.gray.opacity(0.2).cornerRadius(5))
                            .padding(.horizontal)
                            .id(i) // 给每个TextField绑定唯一标识
                            .focused($focusedIndex, equals: i)
                    }
                    // 底部额外预留空间，避免最下方元素贴边被截断
                    Color.clear.frame(height: 24)
                }
                // 聚焦状态变化时手动滚动到对应位置
                .onChange(of: focusedIndex) { currentIndex in
                    guard let currentIndex = currentIndex else { return }
                    withAnimation {
                        // anchor设为.bottom可保证TextField整体处于可视区域内，可根据需求调整预留空间大小
                        scrollProxy.scrollTo(currentIndex, anchor: .bottom)
                    }
                }
            }
        }
        // 可选配置：支持滑动交互收起键盘，提升使用体验
        .scrollDismissesKeyboard(.interactively)
    }
}

如果需要更大的底部预留空间，只需要调整底部Color.clear的高度即可。

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