SwiftUI中ScrollView键盘弹出时保持底部可见项的实现方案

要实现键盘弹出/尺寸变化时，让原本在底部的条目保持可见，你可以借助ScrollViewReader的滚动能力，结合键盘状态监听来主动触发滚动。以下是具体实现步骤和代码示例：

核心思路 #

1. 为需要保持可见的底部条目添加唯一的id标识，让ScrollViewReader能定位到它
2. 监听键盘弹出/尺寸变化的事件（通过安全区Insets变化或系统键盘通知）
3. 在事件触发时，调用ScrollViewProxy的scrollTo方法，配合动画滚动到目标条目，确保它处于可见范围内

代码实现 #

方式1：监听安全区Insets变化（SwiftUI原生推荐） #

通过监听底部安全区的变化判断键盘状态，无需依赖系统通知：

ScrollViewReader { proxy in
    ScrollView {
        // ... 其他列表内容
        
        // 给底部目标条目添加唯一ID
        YourBottomEntryView()
            .id("targetBottomEntry")
    }
    .safeAreaInset(edge: .bottom, spacing: 0) {
        TextInputCellView() { value in
            vm.send(text: value)
        }
    }
    .onChange(of: UIApplication.shared.windows.first?.safeAreaInsets.bottom) { newBottomInset in
        // 过滤初始安全区状态（默认底部安全区一般小于20pt）
        guard let newBottomInset = newBottomInset, newBottomInset > 20 else { return }
        // 带动画滚动到目标条目，锚点设为.bottom确保完全可见
        withAnimation {
            proxy.scrollTo("targetBottomEntry", anchor: .bottom)
        }
    }
}

方式2：监听系统键盘通知 #

如果需要更精准的键盘状态控制，直接监听系统键盘通知：

ScrollViewReader { proxy in
    ScrollView {
        // ... 其他列表内容
        
        YourBottomEntryView()
            .id("targetBottomEntry")
    }
    .safeAreaInset(edge: .bottom, spacing: 0) {
        TextInputCellView() { value in
            vm.send(text: value)
        }
    }
    .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillShowNotification)) { _ in
        withAnimation {
            proxy.scrollTo("targetBottomEntry", anchor: .bottom)
        }
    }
    .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillChangeFrameNotification)) { _ in
        withAnimation {
            proxy.scrollTo("targetBottomEntry", anchor: .bottom)
        }
    }
}

动态列表场景（比如最后一条数据） #

如果底部条目是动态列表的最后一项，绑定数据的唯一ID即可：

ScrollViewReader { proxy in
    ScrollView {
        ForEach(vm.messageList) { message in
            MessageCell(message: message)
                .id(message.id)
        }
    }
    .safeAreaInset(edge: .bottom, spacing: 0) {
        TextInputCellView() { value in
            vm.send(text: value)
        }
    }
    .onChange(of: UIApplication.shared.windows.first?.safeAreaInsets.bottom) { newBottomInset in
        guard let newBottomInset = newBottomInset, newBottomInset > 20 else { return }
        guard let lastMessageId = vm.messageList.last?.id else { return }
        withAnimation {
            proxy.scrollTo(lastMessageId, anchor: .bottom)
        }
    }
}

关键说明 #

• anchor: .bottom参数确保目标条目滚动到视图底部，不会被键盘遮挡
• withAnimation让滚动过程更平滑，符合iOS交互体验
• 安全区Insets的判断阈值（20pt）可根据布局调整，适配不同设备的默认安全区

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