SwiftUI中如何修改TabView页面布局，实现侧边可见卡片效果？

方案一：修改现有TabView实现 #

不需要更换组件，通过调整卡片宽度和容器内边距就能实现目标效果。核心思路是让卡片宽度小于屏幕宽度，同时给TabView添加水平内边距，滑动时左右就能露出相邻卡片的部分，TabView的page样式会自动保证松手后当前卡片居中。

代码示例：

@State private var currentPage: UUID = fakedCards.first?.id ?? UUID()

var body: some View {
    GeometryReader { proxy in
        // 控制卡片宽度，减去的值越大，侧边露出的内容越多
        let cardWidth = proxy.size.width - 80
        
        TabView(selection: $currentPage) {
            ForEach(fakedCards) { card in
                // 替换成你的卡片内容视图
                RoundedRectangle(cornerRadius: 16)
                    .fill(Color.blue.opacity(0.8))
                    .frame(width: cardWidth, height: proxy.size.height * 0.7)
                    .tag(card.id)
            }
        }
        .tabViewStyle(.page(indexDisplayMode: .never))
        // 水平内边距和卡片宽度的差值对应，保证侧边露出的空间一致
        .padding(.horizontal, 40)
    }
}

说明：

• 调整cardWidth的计算值（比如改成proxy.size.width - 100）可以控制左右侧边露出的卡片宽度
• padding(.horizontal, 40)和卡片宽度的差值对应，确保TabView容器左右留空，让相邻卡片能显示出来
• 保留TabView的.page样式，自动处理滑动后的居中对齐

方案二：用ScrollView实现（iOS 16+） #

如果更倾向于用ScrollView，利用iOS 16新增的滚动目标对齐特性，同样能实现松手后卡片自动居中的效果，同时支持侧边预览。

代码示例：

@State private var scrollPosition: UUID?

var body: some View {
    GeometryReader { proxy in
        let cardWidth = proxy.size.width - 80
        
        ScrollView(.horizontal) {
            LazyHStack(spacing: 20) {
                ForEach(fakedCards) { card in
                    // 替换成你的卡片内容视图
                    RoundedRectangle(cornerRadius: 16)
                        .fill(Color.blue.opacity(0.8))
                        .frame(width: cardWidth, height: proxy.size.height * 0.7)
                        .containerRelativeFrame(.horizontal) { _, _ in
                            1 // 确保卡片在滚动容器中正确对齐
                        }
                        .id(card.id)
                }
            }
            .scrollTargetLayout()
        }
        // 开启视图对齐的滚动目标行为，松手后自动居中当前卡片
        .scrollTargetBehavior(.viewAligned)
        .scrollPosition(id: $scrollPosition)
        .padding(.horizontal, 40)
        .scrollIndicators(.hidden)
    }
}

说明：

• .scrollTargetLayout()和.scrollTargetBehavior(.viewAligned)是实现自动居中的核心
• scrollPosition用于绑定当前显示的卡片ID，和TabView的selection作用类似
• LazyHStack的spacing可以控制卡片之间的间距，调整露出内容的多少

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