SwiftUI实现带前后项预览的ScrollView技术求助

问题 #

想要创建一个包含10个RoundedRectangle的水平ScrollView，要求界面主要显示一个矩形，但能小幅预览前后项来提示用户可滚动。目前已添加.scrollTargetLayout()、.scrollTargetBehavior(.viewAligned)，为每个项设置.containerRelativeFrame(_:)确保仅显示一个矩形，并用.scrollPosition(id:)控制显示项，但当前只能显示单个矩形，无法预览前后项。

当前代码：

struct CardTheme: View {
    @State private var scrollID: Int? = 0
    
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack {
                ForEach(0..<10, id: \.self) { i in
                    RoundedRectangle(cornerRadius: 25)
                        .frame(width: 280, height: 450)
                        .containerRelativeFrame(.horizontal, count: 1, spacing: 16)
                }
            }
            .scrollTargetLayout()
        }
        .scrollTargetBehavior(.viewAligned)
        .scrollPosition(id: $scrollID)
    }
}

尝试过修改.containerRelativeFrame的count值并删除frame()，但count大于3时虽能看到下一项，却不符合需求。

解决方法 #

核心思路是让ScrollView内部的内容容器宽度略超出可视区域，同时保留单个卡片的对齐逻辑，以此露出前后卡片的边缘。具体修改如下：

struct CardTheme: View {
    @State private var scrollID: Int? = 0
    
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 16) {
                ForEach(0..<10, id: \.self) { i in
                    RoundedRectangle(cornerRadius: 25)
                        .frame(height: 450)
                        .frame(maxWidth: .infinity)
                        .containerRelativeFrame(.horizontal, count: 1, spacing: 16)
                        .scaleEffect(scrollID == i ? 1.0 : 0.95) // 可选：强化当前卡片的视觉焦点
                }
            }
            .scrollTargetLayout()
            .padding(.horizontal, 40) // 关键：让内容超出可视区域，露出前后卡片边缘
        }
        .scrollTargetBehavior(.viewAligned)
        .scrollPosition(id: $scrollID)
    }
}

关键说明 #

• .padding(.horizontal, 40)：给内部HStack添加水平内边距，使ScrollView可视区域左右留出空间，卡片滚动时自然露出前后项的边缘
• 移除固定宽度的.frame(width: 280)，改用.frame(maxWidth: .infinity)配合.containerRelativeFrame，既保证单个卡片占满可视区域的核心逻辑，又让卡片自适应容器宽度
• 可选的.scaleEffect：让当前选中的卡片保持原尺寸，未选中的略缩小，进一步区分主卡片与预览项，提升视觉体验

内容的提问来源于stack exchange，提问作者林禹澔