SwiftUI中如何为ScrollView启用分页功能并实现无限滚动

需求说明 #

给现有ScrollView添加两个核心功能：

• 类似UICollectionView的分页效果，滚动后自动停在全屏显示的元素上
• 支持无限滚动

原实现代码 #

var textScrollView: some View {
 ScrollView {
     VStack(spacing: 20) {
         ForEach(0..<self.textData.count, id: \.self) { index in
             
             let text = (AppData.shared().appFont == "ScopeOne-Regular") && (textData[index].text.hasSuffix("!")) ? "\u{2800}\(textData[index].text)\u{2800}" : " \(textData[index].text) "
             
             Text(text)
                 .foregroundColor(.white)
                 .font(.largeTitle)
                 .frame(width: 200, height: 200)
                 .padding()
                 .frame(width : UIScreen.main.bounds.width, height: UIScreen.main.bounds.height,alignment: .center)
                 
         }
     }
 }
 .frame(width : UIScreen.main.bounds.width, height: UIScreen.main.bounds.height,alignment: .center)
 }

修改后的实现方案 #

1. 实现分页效果

• 指定ScrollView滚动方向，配合.scrollTargetBehavior(.paging)开启原生分页
• 移除VStack的spacing，分页要求每个元素刚好占满容器，间距会导致滚动偏移
• 用GeometryReader获取容器尺寸，替代UIScreen.main.bounds，适配不同布局场景

2. 实现无限滚动

• 将ForEach的循环范围设为极大值（如0..<Int.max），通过index % textData.count循环获取数据源元素
• 设置初始滚动位置到数据源长度的倍数（如textData.count * 1000），避免用户一开始就滚动到边界

完整代码 #

var textScrollView: some View {
    GeometryReader { geo in
        ScrollView(.vertical) {
            LazyVStack(spacing: 0) { // 使用LazyVStack优化无限滚动性能，移除间距
                ForEach(0..<Int.max, id: \.self) { index in
                    let actualIndex = index % textData.count
                    let text = (AppData.shared().appFont == "ScopeOne-Regular") && (textData[actualIndex].text.hasSuffix("!")) ? "\u{2800}\(textData[actualIndex].text)\u{2800}" : " \(textData[actualIndex].text) "
                    
                    Text(text)
                        .foregroundColor(.white)
                        .font(.largeTitle)
                        .frame(width: 200, height: 200)
                        .padding()
                        .frame(width: geo.size.width, height: geo.size.height, alignment: .center)
                }
            }
            .scrollTargetLayout() // 标记滚动目标布局，配合分页行为生效
        }
        .scrollTargetBehavior(.paging) // 启用分页滚动行为
        .scrollPosition(id: .constant(textData.count * 1000)) // 设置初始滚动到中间位置，支持双向无限滚动
        .frame(width: geo.size.width, height: geo.size.height, alignment: .center)
    }
}

关键细节说明 #

• LazyVStack：仅加载可见区域的元素，避免无限滚动导致的内存占用过高
• scrollTargetLayout：必须添加的修饰符，让分页系统能正确识别每个全屏元素的滚动边界
• 替换UIScreen.main.bounds：使用GeometryReader获取父容器尺寸，符合SwiftUI响应式布局的设计原则

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