SwiftUI实现ScrollView中视图自动居中对齐及起始位置需求

嘿，我来分享下怎么实现你要的这个SwiftUI ScrollView需求哈！你要做的是一个能接收字符串数组的滚动视图，屏幕中间得有个覆盖层参考区域，只要列表项滚进这个区域，就得立刻自动对齐到屏幕正中央；而且列表刚加载的时候，第一个元素得直接显示在屏幕中间。我之前也琢磨过类似的实现，给你整理了一套可行的方案：

核心实现思路 #

• 用GeometryReader获取屏幕中间区域的位置，用来判断列表项是否进入目标范围
• 借助ScrollViewReader或者iOS16+的scrollTargetBehavior来精准控制滚动位置，实现平滑的自动居中效果
• 初始化时通过滚动到第一个元素的位置，让它默认就停在屏幕中间

代码实现（iOS 16+ 简洁版） #

这个版本用了iOS16新增的滚动目标行为，代码更简洁流畅：

struct CenteredScrollView: View {
    let items: [String]
    @State private var selectedIndex = 0
    @Namespace private var animationNamespace

    var body: some View {
        GeometryReader { screenGeo in
            ZStack {
                // 中间的覆盖层（蓝色边框的参考区域，可自定义样式）
                RoundedRectangle(cornerRadius: 8)
                    .stroke(Color.blue, lineWidth: 2)
                    .frame(width: screenGeo.size.width * 0.8, height: 60)
                    .opacity(0.5)

                ScrollView(.horizontal, showsIndicators: false) {
                    HStack(spacing: 20) {
                        ForEach(items.indices, id: \.self) { index in
                            Text(items[index])
                                .font(.title)
                                .padding()
                                .background(Color.gray.opacity(0.2))
                                .cornerRadius(8)
                                .matchedGeometryEffect(id: "selectedItem", in: animationNamespace)
                                .onAppear {
                                    // 检测当前元素是否进入中间区域，触发自动居中
                                    let middleY = screenGeo.size.height / 2
                                    // 这里的30是触发阈值，可根据元素高度调整
                                    if abs(screenGeo.frame(in: .global).midY - middleY) < 30 {
                                        withAnimation(.easeInOut(duration: 0.2)) {
                                            selectedIndex = index
                                        }
                                    }
                                }
                        }
                    }
                    // 左右添加内边距，让元素滚动时能完全居中
                    .padding(.horizontal, (screenGeo.size.width - (screenGeo.size.width * 0.8)) / 2)
                }
                .scrollTargetBehavior(.viewAligned)
                .onAppear {
                    // 初始化时让第一个元素居中
                    withAnimation {
                        selectedIndex = 0
                    }
                }
            }
        }
    }
}

兼容iOS 15及以下版本 #

如果需要兼容更早的系统，就用ScrollViewReader来手动控制滚动：

struct CenteredScrollView: View {
    let items: [String]

    var body: some View {
        GeometryReader { screenGeo in
            ZStack {
                // 中间的覆盖层参考区域
                RoundedRectangle(cornerRadius: 8)
                    .stroke(Color.blue, lineWidth: 2)
                    .frame(width: screenGeo.size.width * 0.8, height: 60)
                    .opacity(0.5)

                ScrollViewReader { proxy in
                    ScrollView(.horizontal, showsIndicators: false) {
                        HStack(spacing: 20) {
                            ForEach(items.indices, id: \.self) { index in
                                Text(items[index])
                                    .font(.title)
                                    .padding()
                                    .background(Color.gray.opacity(0.2))
                                    .cornerRadius(8)
                                    .id(index)
                                    .onAppear {
                                        // 检测元素是否进入中间区域
                                        let middleY = screenGeo.size.height / 2
                                        if let itemFrame = proxy.frame(in: .global, for: index) {
                                            if abs(itemFrame.midY - middleY) < 30 {
                                                withAnimation(.easeInOut(duration: 0.2)) {
                                                    proxy.scrollTo(index, anchor: .center)
                                                }
                                            }
                                        }
                                    }
                            }
                        }
                        .padding(.horizontal, (screenGeo.size.width - 200) / 2) // 200为元素预估宽度，可调整
                    }
                    .onAppear {
                        // 初始化滚动到第一个元素，让它居中
                        proxy.scrollTo(0, anchor: .center)
                    }
                }
            }
        }
    }
}

关键细节说明 #

• 中间的蓝色边框矩形就是你要的覆盖层，你可以自定义它的样式、大小，甚至改成透明的，只保留检测逻辑就行
• 触发自动居中的阈值（代码里的30）可以根据你的元素高度调整，数值越小触发越精准，越大则越灵敏
• 左右的内边距是为了让元素滚动到边缘时也能完全居中，避免被屏幕边缘截断

备注：内容来源于stack exchange，提问作者Artem T