SwiftUI中ScrollViewReader键盘弹出时滚动至已可见视图的解决方案

针对你遇到的「滚动视图已在底部时，键盘弹出scrollTo不生效」的问题，以下是几种无需延迟调用的可行方案：

方案1：指定滚动锚点强制对齐 #

利用scrollTo(_:anchor:)方法明确指定底部锚点，即使目标视图已被标记为可见，也会强制将其对齐到滚动视图的底部边缘，避免被键盘遮挡。

struct ExampleView: View {
    @State private var keyboardHeight: CGFloat = 0
    
    var body: some View {
        ScrollViewReader { reader in
            ScrollView {
                ForEach(1..<50, id: \.self) { number in
                    Text(number.description)
                }
                
                Rectangle().frame(width: 1, height: 1).id("last")
            }
            .onReceive(Publishers.keyboardState) { state in
                keyboardHeight = state.height // 假设keyboardState包含键盘高度属性
                withAnimation {
                    // 指定.bottom锚点，强制对齐滚动视图底部
                    reader.scrollTo("last", anchor: .bottom)
                }
            }
        }
    }
}

方案2：动态调整滚动视图内边距 #

通过给滚动视图添加与键盘高度一致的底部内边距，改变内容的布局范围，此时调用scrollTo会重新计算滚动位置，确保底部内容处于键盘上方。

struct ExampleView: View {
    @State private var keyboardHeight: CGFloat = 0
    
    var body: some View {
        ScrollViewReader { reader in
            ScrollView {
                ForEach(1..<50, id: \.self) { number in
                    Text(number.description)
                }
                
                Rectangle().frame(width: 1, height: 1).id("last")
            }
            // 根据键盘高度动态添加底部内边距
            .padding(.bottom, keyboardHeight)
            .onReceive(Publishers.keyboardState) { state in
                keyboardHeight = state.height
                withAnimation {
                    reader.scrollTo("last", anchor: .bottom)
                }
            }
        }
    }
}

方案3：直接操作UIKit的UIScrollView #

通过UIViewRepresentable封装UIKit的UIScrollView，使用原生API强制滚动到底部，绕过SwiftUI的可见性判断逻辑。

struct ForceScrollView: UIViewRepresentable {
    let content: () -> UIView
    @Binding var scrollToBottom: Bool
    
    func makeUIView(context: Context) -> UIScrollView {
        let scrollView = UIScrollView()
        let contentView = content()
        contentView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview(contentView)
        
        NSLayoutConstraint.activate([
            contentView.topAnchor.constraint(equalTo: scrollView.topAnchor),
            contentView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
            contentView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
            contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
            contentView.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
        ])
        
        return scrollView
    }
    
    func updateUIView(_ uiView: UIScrollView, context: Context) {
        guard scrollToBottom else { return }
        DispatchQueue.main.async {
            // 强制滚动到内容底部
            let bottomRect = CGRect(
                x: 0,
                y: uiView.contentSize.height - uiView.bounds.height,
                width: 1,
                height: 1
            )
            uiView.scrollRectToVisible(bottomRect, animated: true)
        }
        scrollToBottom = false
    }
}

// 调用示例
struct ExampleView: View {
    @State private var scrollToBottomTrigger = false
    
    var body: some View {
        ForceScrollView(scrollToBottom: $scrollToBottomTrigger) {
            let stackView = UIStackView()
            stackView.axis = .vertical
            for number in 1..<50 {
                let label = UILabel()
                label.text = "\(number)"
                stackView.addArrangedSubview(label)
            }
            return stackView
        }
        .onReceive(Publishers.keyboardState) { _ in
            scrollToBottomTrigger = true
        }
    }
}

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