SwiftUI：切换Tab后定位List指定行的实现求助

要实现点击按钮切换Tab后自动滚动到Picker选中的List行，需要通过共享选中状态+ScrollViewReader滚动定位来实现，具体修改步骤如下：

1. 完善PlacesViewModel，添加共享选中索引 #

在你的PlacesViewModel中添加一个@Published属性，用来存储选中的位置索引：

class PlacesViewModel: ObservableObject {
    // 原有的属性（示例）
    @Published var title: String = "Places"
    @Published var places: [Place] = [] // 确保Place模型已实现Identifiable协议
    
    // 新增：存储选中的位置索引
    @Published var selectedPlaceIndex: Int?
}

2. 修正ContentView的Binding传递 #

原ContentView中FirstScreen的tabSelection传递错误，需要改为绑定传递：

struct ContentView: View {
    @State var tabSelection: Int = 0
    
    var body: some View {
        TabView(selection: $tabSelection) {
            // 修正：将tabSelection改为$tabSelection，传递Binding
            FirstScreen(tabSelection: $tabSelection)
                .tag(0)
                .tabItem {
                    Label("First Screen", systemImage: "list.bullet.rectangle")
                }
            
            PlacesScreen()
                .tag(1)
                .tabItem {
                    Label("Places", systemImage: "tray.2.fill")
                }
        }
    }
}

3. 修改FirstScreen，同步选中索引到ViewModel #

点击按钮时，除了切换Tab，还要把Picker选中的索引同步到ViewModel：

struct FirstScreen: View {
    @EnvironmentObject var placesViewModel: PlacesViewModel
    @State var placeChoice = 0
    @Binding var tabSelection: Int
    
    var body: some View {
        NavigationView {
            Form {
                VStack {
                    Picker("Places", selection: $placeChoice) {
                        ForEach(0 ..< placesViewModel.places.count) { index in
                            Text(placesViewModel.places[index].name)
                                .tag(index)
                        }
                    }.pickerStyle(WheelPickerStyle())
                    
                    Button {
                        tabSelection = 1
                        // 新增：将选中索引同步到ViewModel
                        placesViewModel.selectedPlaceIndex = placeChoice
                    } label: {
                        Text("Show place")
                            .font(.system(size: 20))
                            .padding()
                            .foregroundColor(.white)
                            .background(Color.blue)
                            .cornerRadius(8)
                    }
                }
            }
            .navigationTitle("First Screen")
        }
    }
}

4. 修改PlacesList，添加滚动定位逻辑 #

使用ScrollViewReader监听ViewModel的选中索引变化，自动滚动到对应行：

struct PlacesList: View {
    @EnvironmentObject var placesViewModel: PlacesViewModel
    // 用于判断是否是刚切换到该Tab，避免重复滚动
    @State private var isFirstAppear = true
    
    var body: some View {
        NavigationView {
            ScrollViewReader { proxy in
                List {
                    // 改为带索引的ForEach，确保每个行有唯一的id用于定位
                    ForEach(Array(placesViewModel.places.enumerated()), id: \.element.id) { index, place in
                        NavigationLink {
                            PlaceScreen(place: place)
                        } label: {
                            HStack {
                                place.image
                                    .resizable()
                                    .frame(width: 50, height: 50)
                                Text(place.name)
                                Spacer()
                            }
                        }
                        // 给每个行添加id，用索引作为滚动标记
                        .id(index)
                    }
                }
                .navigationTitle(placesViewModel.title)
                // 监听选中索引变化，触发滚动
                .onChange(of: placesViewModel.selectedPlaceIndex) { newIndex in
                    guard let index = newIndex, !isFirstAppear else {
                        isFirstAppear = false
                        return
                    }
                    withAnimation {
                        proxy.scrollTo(index, anchor: .top)
                    }
                }
                // 页面出现时如果已有选中索引，触发滚动
                .onAppear {
                    if let index = placesViewModel.selectedPlaceIndex {
                        withAnimation {
                            proxy.scrollTo(index, anchor: .top)
                        }
                    }
                    isFirstAppear = false
                }
            }
        }
    }
}

关键说明 #

• ScrollViewReader是SwiftUI中用于滚动定位的核心组件，通过scrollTo(_:anchor:)方法可以滚动到指定id的视图。
• 利用ViewModel的@Published属性实现跨页面的状态共享，确保FirstScreen的选中状态能传递到PlacesList。
• 添加isFirstAppear是为了避免页面首次加载时就触发滚动（如果ViewModel初始有值的话），只在主动切换Tab时执行滚动操作。

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