SwiftUI下拉列表ScrollView无法滚动至选中元素的问题解决咨询

嗨，我帮你排查了代码里的问题，主要是两个关键点导致scrollTo没生效，调整后就能正常工作了，我来一步步说明：

问题1：ScrollViewReader的标识ID不匹配 #

你当前的ForEach用了\.offset作为列表项的ID，但调用scrollTo时传的是selectedData.id（也就是SampleData的uuid），两者完全不对应——ScrollViewReader根本找不到你要滚动到的元素！

SampleData已经遵循了Identifiable协议，所以直接用元素自身的id作为列表项的标识就好，不用绕enumerated。

问题2：滚动触发的时机不准确 #

原来的onAppear可能在下拉框还没完全渲染完成时就执行了，导致滚动指令失效。换成监听showDropDown的变化，只有当下拉框显示（showDropDown变为true）时才执行滚动，时机更精准。

修改后的核心代码片段 #

先修正初始化数据时的笔误（第一个元素title多了个多余的字符），然后调整下拉框的核心逻辑：

// 修正初始化数据的笔误
@State private var data: [SampleData] = [
    SampleData(title: "Mark"),
    SampleData(title: "John"),
    SampleData(title: "Paul"),
    SampleData(title: "Jaime"),
    SampleData(title: "Michael"),
    SampleData(title: "David"),
    SampleData(title: "Andy"),
    SampleData(title: "Ryan"),
    SampleData(title: "Henry"),
    SampleData(title: "Chad")
]

// 调整dropDownView部分
var dropDownView: some View {
    ZStack {
        if showDropDown {
            Spacer()
            ScrollViewReader { proxy in
                ScrollView(.vertical, showsIndicators: false) {
                    LazyVStack {
                        // 直接遍历data，复用Identifiable的默认id
                        ForEach(data) { element in
                            let index = data.firstIndex(where: { $0.id == element.id }) ?? 0
                            Text("\(index): \(element.title)")
                                .font(.caption)
                                .foregroundColor(getSelectedDataColor(element: element))
                                .padding(8.0)
                                .onTapGesture {
                                    selectedData = element
                                    self.showDropDown = false
                                }
                        }
                    }
                    // 替换onAppear为监听showDropDown的显示状态
                    .onChange(of: showDropDown) { newValue in
                        if newValue, let selectedData = selectedData {
                            withAnimation {
                                proxy.scrollTo(selectedData.id)
                            }
                        }
                    }
                }
            }
        }
    }
    .frame(width: UIScreen.main.bounds.width/2, height: UIScreen.main.bounds.height/4)
    .shadow(radius: 4)
}

额外说明 #

如果你还是需要显示元素的索引，可以用data.firstIndex(where: { $0.id == element.id })来获取——因为现在直接遍历data，索引需要通过id匹配来获取（类类型的元素用id匹配比直接用firstIndex(of:)更可靠）。

这样修改后，当你选中某个元素再打开下拉框时，ScrollView就会自动滚动到选中项的位置了～

内容来源于stack exchange