SwiftUI中.scrollTargetBehavior(.paging)元素居中分页实现问题

你要实现的分页轮播效果要求元素不占满屏幕宽度，存在前后元素时能显示其部分内容。现有代码在仅1个或2个元素时表现正常，但3个元素场景下，中间的"Tap 1"元素无法居中，且前后元素的显示效果不符合预期。

元素宽度规则明确：

• 单个元素：屏幕宽度 - 2倍水平内边距（最宽）
• 首尾元素：屏幕宽度 - 左侧内边距 - 与下一个元素的间距 - 下一个元素的部分宽度（比中间元素宽）
• 中间元素：屏幕宽度 - 前后元素的部分宽度 - 与前后元素的间距（宽度更短）

解决方案 #

问题核心在于默认分页滚动行为与元素宽度计算的配合逻辑冲突。我们改用视图对齐的滚动目标行为，同时重构宽度计算逻辑，确保中间元素滚动后居中，前后元素露出合理部分。

修改后的完整代码：

import SwiftUI

public struct CardArticleCarouselUDS: View {

    private let articles: [String]
    // 提取布局常量，便于统一调整
    private let horizontalPadding: CGFloat = 16
    private let peekWidth: CGFloat = 22
    private let itemSpacing: CGFloat = 16

    public init(articles: [String]) {
        self.articles = articles
    }

    public var body: some View {
        if #available(iOS 17.0, *) {
            ScrollView(.horizontal, showsIndicators: false) {
                LazyHStack(spacing: itemSpacing) {
                    ForEach(0 ..< articles.count) { index in
                        ZStack{
                            Color.red
                            Button(action: { }) {
                                Text("Tap \(index)")
                            }
                        }
                        .frame(height: 296)
                        .containerRelativeFrame(.horizontal) { length, _ in
                            calculateItemWidth(screenWidth: length, index: index)
                        }
                        .scrollTargetLayout() // 标记为滚动目标布局元素
                    }
                }
                .padding(.horizontal, horizontalPadding)
            }
            // 使用视图对齐的滚动行为，以元素中心为对齐基准
            .scrollTargetBehavior(.viewAligned(alignment: .center))
        } else {
            // iOS 17以下版本的降级处理
            Text("需要iOS 17或更高版本")
        }
    }

    // 统一计算不同位置元素的宽度
    private func calculateItemWidth(screenWidth: CGFloat, index: Int) -> CGFloat {
        let singleItemWidth = screenWidth - 2 * horizontalPadding
        
        guard articles.count > 1 else {
            return singleItemWidth
        }
        
        // 中间元素宽度：屏幕宽度减去前后露出部分+间距的总和
        let middleItemWidth = screenWidth - 2 * (peekWidth + itemSpacing)
        // 首尾元素宽度：确保下一个元素能露出设定的peekWidth
        let edgeItemWidth = screenWidth - horizontalPadding - itemSpacing - peekWidth
        
        return index == 0 || index == articles.count - 1 ? edgeItemWidth : middleItemWidth
    }
}

#Preview {
    let array: [String] = ["One", "Two", "Three"]
    ScrollView {
        CardArticleCarouselUDS(articles: Array(array.prefix(1)))
        CardArticleCarouselUDS(articles: Array(array.prefix(2)))
        CardArticleCarouselUDS(articles: Array(array.prefix(3)))
    }
}

关键改动说明 #

1. 滚动行为调整：
   替换.paging为.viewAligned(alignment: .center)，让滚动时以元素中心为对齐目标，确保中间元素能准确居中；同时添加.scrollTargetLayout()标记元素，让滚动对齐逻辑生效。

2. 宽度计算重构：
   提取布局常量，让宽度计算更清晰可维护。中间元素宽度设置为屏幕宽度减去两倍的「露出宽度+间距」，滚动到中间元素时，前后刚好露出设定的peekWidth；首尾元素按规则计算，保证和下一个元素的间距、露出部分符合需求。

3. 布局细节优化：
   移除原代码中干扰居中的alignment: .trailing参数，让元素宽度计算直接匹配布局逻辑，避免额外偏移。

修改后，3个元素场景下中间元素会准确居中，前后元素露出设定的部分内容，1个和2个元素的场景也能保持原有符合预期的表现。

内容的提问来源于stack exchange，提问作者Konstantin.Efimenko