SwiftUI如何使用ScrollViewReader滚动到横向列表的指定元素

你代码的核心问题是横向ScrollView内部没有嵌套HStack排列子元素，ScrollView默认子视图为垂直堆叠逻辑，直接放ForEach会导致布局完全错乱。以下是可直接落地的修正方案：

• 首先在ScrollView内容外层包裹HStack，指定子元素间距、对齐方式等布局属性
• 确保scrollTo入参selectedIndex的类型和元素绑定的id类型完全匹配，你这里用Int类型的index作为id，就要保证selectedIndex也是Int类型，避免类型不匹配导致滚动失效
• 如果需要支持选中值变更时自动滚动，可以新增onChange修饰符监听selectedIndex的变化

修正后的完整代码：

ScrollViewReader { proxy in
    ScrollView(.horizontal, showsIndicators: false) {
        // 新增HStack是解决布局错乱的核心修改点
        HStack(spacing: 16) {
            ForEach(0..<items.count) { index in
                Text(items[index].title)
                    .id(index)
                    .onTapGesture {
                        print("tapped \(index)")
                        // 点击时带动画滚动到对应位置
                        withAnimation {
                            proxy.scrollTo(index, anchor: .center)
                        }
                    }
            }
        }
        .padding(.horizontal, 16) // 可按需调整整体左右内边距
    }
    .onAppear {
        // 初始加载时滚动到指定位置
        proxy.scrollTo(selectedIndex, anchor: .center)
    }
    // 可选扩展：监听选中值变化自动滚动
    .onChange(of: selectedIndex) { newValue in
        withAnimation {
            proxy.scrollTo(newValue, anchor: .center)
        }
    }
}

补充说明：如果仍存在子元素挤压变形的问题，可以给每个Text元素设置固定宽度，或者添加.fixedSize(horizontal: true, vertical: false)修饰符，避免文字被压缩省略。

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