SwiftUI：实现ScrollView中文本的程序化分页滚动

由于你只有单个Text元素，scrollPosition(id:)确实无法生效，这里可以用ScrollViewReader结合几何尺寸计算来实现每次滚动一屏的需求，核心思路是获取ScrollView的可视高度，每次点击按钮时让滚动位置增加一个可视高度的距离，同时避免滚动超出文本范围。

完整实现代码 #

import SwiftUI

struct ContentView: View {
    // 记录当前滚动偏移量
    @State private var currentOffset: CGFloat = 0
    // ScrollView的可视区域高度
    @State private var scrollViewVisibleHeight: CGFloat = 0
    // 文本内容的总高度
    @State private var textTotalHeight: CGFloat = 0
    
    var body: some View {
        VStack {
            ScrollViewReader { scrollProxy in
                ScrollView(.vertical) {
                    Text(longText)
                        .background(
                            // 计算文本的总高度
                            GeometryReader { textGeo in
                                Color.clear.onAppear {
                                    textTotalHeight = textGeo.size.height
                                }
                            }
                        )
                }
                .background(
                    // 计算ScrollView的可视高度
                    GeometryReader { scrollGeo in
                        Color.clear.onAppear {
                            scrollViewVisibleHeight = scrollGeo.size.height
                        }
                    }
                )
                .onChange(of: currentOffset) { _, newOffset in
                    // 根据偏移量执行滚动
                    scrollProxy.scrollTo(newOffset, anchor: .top)
                }
            }
            
            Button("下一页") {
                // 计算下一次滚动的目标偏移，避免超出文本底部
                let maxOffset = max(0, textTotalHeight - scrollViewVisibleHeight)
                let targetOffset = min(currentOffset + scrollViewVisibleHeight, maxOffset)
                
                // 首次滚动从0开始偏移一屏高度
                currentOffset = currentOffset == 0 ? scrollViewVisibleHeight : targetOffset
                
                // 文本一屏能显示完时，重置偏移
                if textTotalHeight <= scrollViewVisibleHeight {
                    currentOffset = 0
                }
            }
            .disabled(textTotalHeight <= scrollViewVisibleHeight) // 文本不足一屏时禁用按钮
        }
        .padding()
    }

    var longText = """
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nec dui nunc mattis enim ut tellus elementum sagittis. Et netus et malesuada fames ac turpis egestas integer eget. Arcu non odio euismod lacinia. Ipsum a arcu cursus vitae. Cras fermentum odio eu feugiat pretium nibh ipsum consequat. Ut eu sem integer vitae justo eget. Nunc non blandit massa enim nec dui nunc. Aliquam faucibus purus in massa tempor. Eu scelerisque felis imperdiet proin fermentum leo vel. Velit egestas dui id ornare. Nunc lobortis mattis aliquam faucibus purus in. Arcu bibendum at varius vel pharetra. Est sit amet facilisis magna.
    """
}

#Preview {
    ContentView()
}

关键逻辑说明 #

1. ScrollViewReader：提供ScrollViewProxy对象，让我们可以手动控制滚动位置，替代scrollPosition(id:)的局限性。
2. GeometryReader：分别获取ScrollView的可视高度和文本的总高度，这两个值是实现精准滚动的核心依据。
3. 滚动边界控制：通过textTotalHeight - scrollViewVisibleHeight计算最大可滚动偏移，避免滚动到底部后出现空白区域。
4. 按钮状态处理：当文本内容不足一屏时，自动禁用按钮，避免无效操作。

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