SwiftUI定义滚动行为的scrollTargetBehavior修饰符

SwiftUI中的scrollTargetBehavior修饰符，用于定义滚动行为，尤其是在滚动目标对齐和动画时的具体表现。参数 .viewAligned 是其中的一种模式，用来指定滚动目标的对齐方式。

函数定义

public func scrollTargetBehavior(_ behavior: ScrollTargetBehavior) -> some View

参数

behavior: 定义滚动目标行为的枚举值 ScrollTargetBehavior。以下是常用选项：

.viewAligned（视图对齐）：滚动视图会自动将目标视图与滚动容器的边界对齐。

.paging（分页模式）：滚动视图将目标分成页（类似分页效果），并以页为单位滚动。

.viewAligned 的特点

对齐方式：目标视图的边缘会对齐到滚动容器的边缘。

主要应用：适用于需要以子视图为滚动参考点的场景，如卡片列表或精确滚动到某一视图。

示例代码

struct ContentView: View {
    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack(spacing: 0) { // 设置间距为0
                ForEach(0..<10, id: \.self) { index in
                    Text("Item \(index)")
                        .frame(width: 300, height: 200) // 子视图宽度为滚动视图宽度
                        .background(index.isMultiple(of: 2) ? Color.blue : Color.green)
                        .cornerRadius(10)
                }
            }
        }
        .scrollTargetBehavior(.paging) // 使用分页对齐模式
        .frame(width: 300, height: 220) // 滚动视图宽度与子视图匹配
    }
}

效果: 滚动后，子视图会吸附到滚动视图的左边缘，实现翻页效果。

注意事项

scrollTargetBehavior(.paging) 和 .viewAligned 的滚动效果依赖于内容布局、子视图的宽度、间距、以及滚动视图本身的宽度。如果运行时没有看到子视图自动对齐到下一项的问题，可能是以下原因之一：

可能的原因

1、子视图宽度和间距没有与滚动视图匹配

滚动对齐效果通常需要子视图的宽度能够均匀填充滚动视图宽度或其整数倍。如果子视图宽度和间距不规则，会导致滚动对齐失效。

2、滚动视图宽度不够明确

如果 ScrollView 或 LazyHStack 的宽度没有被限制明确，滚动行为可能无法正确计算对齐位置。

3、布局问题影响对齐计算

例如，LazyHStack 的间距和子视图的 frame 设置冲突，可能导致对齐效果看似无效。

总结

.viewAligned 是一种精确的滚动目标对齐方式，适用于需要逐个视图对齐的场景。

它与 ScrollView、ScrollViewReader 配合，可以实现灵活的滚动控制。

替代默认的自由滚动模式，让滚动行为更加自然、可控。

在实际测试中发现，只有.paging可以实现自动吸附的效果。还需要注意的是，spacing需要为0，ScrollView的frame与子视图的frame尺寸应该一致，或者宽度一致，才能实现翻页自动吸附的效果。

// 1、spacing需要为0
LazyHStack(spacing: 0) {}
// 2、子视图和ScrollView的宽度要一致
Text("Item \(index)")
    .frame(width: 150, height: 150) // width 为150
ScrollView(.horizontal) {}
    .frame(width:150, height: 200)  // width 为150
// 3、需要设置为 .paging
.scrollTargetBehavior(.paging)