SwiftUI：如何解决VStack内嵌ScrollView时的键盘遮挡问题

针对你这种带分段选择器、固定Footer的布局，推荐以下几种实用方案：

方案一：调整ScrollView范围+内置键盘适配 #

你的原布局中ScrollView仅包裹TextField，Footer独立在外，导致键盘弹出时Footer被推上来遮挡输入框。可以重构结构，让ScrollView包含Header之后的所有可滚动内容，同时用Spacer控制Footer位置：

VStack(spacing: 0) {
    Picker("Which tab?", selection: $selectedSegment) {
        ForEach(tab.indices, id: \.self) { index in
            Text(tab[index])
        }
    }.pickerStyle(.segmented)
    .padding()

    HeaderSubView()
    .padding()

    ScrollView {
        VStack(spacing: 20) {
            if selectedSegment == 0 {
                TextField("Text1", text: $text1)
                    .textFieldStyle(.roundedBorder)
                    .padding()
                // 其他需要滚动的内容可添加在此处
            }
            // 用Spacer将Footer挤至ScrollView底部，滚动时Footer随内容移动
            Spacer(minLength: 0)
            FooterSubview()
        }
    }
    .scrollDismissesKeyboard(.interactively) // 支持拖动ScrollView收起键盘
}

调整后，ScrollView会自动适配键盘高度，保证TextField始终处于可视范围，Footer也会随滚动内容移动，不会遮挡输入框。

方案二：监听键盘高度动态偏移ScrollView #

如果Footer必须固定在屏幕底部不随滚动，可通过监听键盘通知调整ScrollView的偏移量：

1. 声明监听键盘高度的状态变量：

@State private var keyboardHeight: CGFloat = 0

2. 在视图生命周期中注册/移除键盘通知：

.onAppear {
    let showObserver = NotificationCenter.default.addObserver(
        forName: UIResponder.keyboardWillShowNotification,
        object: nil,
        queue: .main
    ) { notification in
        let frame = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect
        keyboardHeight = frame?.height ?? 0
    }
    
    let hideObserver = NotificationCenter.default.addObserver(
        forName: UIResponder.keyboardWillHideNotification,
        object: nil,
        queue: .main
    ) { _ in
        keyboardHeight = 0
    }
}
.onDisappear {
    NotificationCenter.default.removeObserver(self)
}

3. 给ScrollView添加动态偏移，并调整安全区域：

ScrollView {
    TextField("Text1", text: $text1)
        .textFieldStyle(.roundedBorder)
        .padding()
}
.padding(.bottom, keyboardHeight)
.edgesIgnoringSafeArea(keyboardHeight > 0 ? .bottom : [])

同时将Footer放在VStack最底部，用Spacer与上方内容隔开：

VStack {
    // 分段选择器、Header、ScrollView...
    
    Spacer()
    FooterSubview()
}

键盘弹出时，ScrollView会被向上推动，TextField就不会被Footer遮挡。

方案三：用系统Toolbar替代固定Footer #

如果Footer是操作按钮类组件，直接将其放入系统Toolbar，系统会自动处理键盘避让逻辑：

VStack {
    Picker("Which tab?", selection: $selectedSegment) {
        ForEach(tab.indices, id: \.self) { index in
            Text(tab[index])
        }
    }.pickerStyle(.segmented)

    HeaderSubView()

    if selectedSegment == 0 {
        ScrollView(){
            TextField("Text1", text: $text1)
                .textFieldStyle(.roundedBorder)
                .padding()
        }
    }
}
.toolbar {
    ToolbarItem(placement: .bottomBar) {
        FooterSubview()
    }
}

这种方式无需手动处理键盘高度，系统会自动在键盘弹出时调整Toolbar位置，是最省心的解决方案。

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