scrollTargetLayout无法居中目标视图的SwiftUI轮播问题求助

修改后的完整代码 #

import SwiftUI

struct AccountCarousel: View {
    
    struct AccountPill: View {
        let text: String
        
        var body: some View {
            Text(text)
                .frame(width: 110, height: 80)
                .background(.red)
                .cornerRadius(30)
                .scrollTransition(.animated, axis: .horizontal) { view, phase in
                    let opacity = phase.progress < 0.2 ? 1 : 0.3
                    view.opacity(opacity)
                }
        }
    }
    
    private var screenHalfWidth: CGFloat {
        UIScreen.main.bounds.width / 2
    }
    
    private var pillHalfWidth: CGFloat {
        110 / 2
    }
    
    private var placeholderWidth: CGFloat {
        screenHalfWidth - pillHalfWidth - 7.5
    }
    
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 15) {
                Spacer(minLength: placeholderWidth)
                
                ForEach(1..<10) { i in
                    AccountPill(text: "\(i)")
                }
                
                Spacer(minLength: placeholderWidth)
            }
            .scrollTargetLayout()
        }
        .scrollTargetBehavior(.paging)
        .safeAreaPadding(.horizontal, 0)
        .background(.gray)
    }
}

#Preview {
    AccountCarousel()
}

问题修复说明 #

1. 滚动居中偏移与边缘视图无法居中

• 替换原.viewAligned滚动行为为.paging，确保滚动停止时目标视图自动精准居中。
• 在HStack首尾添加动态计算的占位Spacer，宽度为屏幕半宽 - 胶囊半宽 - 间距的一半，让首尾的胶囊视图能完全滚动到屏幕中心位置。
• 移除原代码中多余的ZStack和紫色占位视图，避免布局层级冲突。

2. 延迟scrollTransition的淡出触发时机

• 放弃原transition.isIdentity的判断逻辑，改用phase.progress（滚动过渡进度值，范围0~1）控制透明度：当进度小于0.2时保持完全不透明，超过阈值后再降低到0.3，实现延迟淡出效果。
• 为scrollTransition添加.animated和axis: .horizontal参数，让过渡动画仅作用于横向滚动方向，提升流畅度。

额外优化 #

• 移除AccountPill中不必要的@State修饰符（text为外部传入的静态值，无需状态管理）。
• 简化AccountPill布局结构，去掉冗余的VStack。

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