SwiftUI中如何为TabView每个类实例分配对应专属页面

你的实现踩了SwiftUI分页TabView的三个核心逻辑错误，必然会出现绑定混乱：

• tag() 要求传入的值在视图首次渲染时就是固定、唯一的，不能等onAppear触发后再动态修改。SwiftUI渲染ForEach子视图时会提前读取所有页面的tag做匹配，你把tag绑定到动态变化的currentPage，渲染阶段所有页面的tag都是初始值0，根本无法和pageSelection完成匹配。
• 页面样式的TabView为了保证滑动流畅，会提前预加载当前页相邻的1-2个页面，这些被预加载的非可见页面也会触发onAppear回调，不是只有滑到屏幕上的页面才会触发。你在onAppear里累加页码，预加载多少页面就会错误累加多少次，数值必然乱跳。
• 你的页码计算逻辑本身有问题：currentPage += 索引 是累计求和，比如3个位置的索引分别是0、1、2，算出来的currentPage会依次是0、1、3，页码本身就不连续。

完全不需要单独维护currentPage做动态页码分配，直接用ForEach遍历拿到的元素索引当每个页面的固定tag即可，pageSelection直接绑定当前选中的索引值，所有页码相关的逻辑不要放在onAppear里处理。

注意：如果需要监听当前滑动到了哪一页，用.onChange(of: pageSelection)监听选中值变化即可，这个回调只会在用户真正切到新页面时触发，不会受预加载影响。

修正后代码 #

struct LocationView: View {
    @ObservedObject var weatherVM: WeatherViewViewModel
    @ObservedObject var multiLocationVM: MultiLocationViewModel
    
    // 页码从0开始，和数组索引对齐，初始值设为0默认展示第一页
    @State private var pageSelection = 0

    var body: some View {
        ZStack {
            LinearGradient(colors: [Color("BackgroundColorSun"), Color("BackgroundColorSky")], startPoint: .topLeading, endPoint: UnitPoint(x: 0.5, y: 0.5)).ignoresSafeArea()
        
            if multiLocationVM.weatherVM.isEmpty {
                BlankLocationView(multiLocationVM: multiLocationVM)
            } else {
                TabView(selection: $pageSelection) {
                    // 枚举遍历同时拿到索引和数据对象，索引直接当固定tag用
                    ForEach(Array(multiLocationVM.weatherVM.enumerated()), id: \.element.city) { index, location in
                        VStack(spacing: 0) {
                            VStack(spacing: -10) {
                                ZStack(alignment: .center) {
                                    Text("\(location.getWeatherIconFor(icon: location.weatherIcon))")
                                        .font(.custom("SF Pro Text", size: 64))
                                        .innerShadow()
                                        .offset(x: -70, y: -35)

                                    Text("\(location.getTempFor(temp: location.weather.current.temp))°")
                                        .font(.system(size: 96, weight: .semibold, design: .rounded))
                                        .tracking(-0.41)
                                        .shadow(color: .black.opacity(0.25), radius: 4, x: 0, y: 4)
                                }
                                .offset(x: 15)
                                Text(location.conditions)
                                    .font(.custom("SF Pro Display", size: 24))
                            }
                            .padding(EdgeInsets(top: -8, leading: 0, bottom: -8, trailing: 0))


                            VStack(spacing: -20) {
                                HourlyWeatherView(weatherVM: location)
                                DailyWeatherView(weatherVM: location)
                            }

                            Spacer()

                        }
                        // 渲染时就绑定固定索引当tag，不会动态变化
                        .tag(index)
                    }
                }
                .tabViewStyle(.page(indexDisplayMode: .automatic))
                .indexViewStyle(.page(backgroundDisplayMode: .interactive))
                // 切页完成后再做数据同步，不受预加载影响
                .onChange(of: pageSelection) { newPage in
                    let currentLocation = multiLocationVM.weatherVM[newPage]
                    weatherVM.city = currentLocation.city
                    currentLocation.page = newPage
                }
            }
        }
        .padding(.bottom, 70)
        .ignoresSafeArea()
        // 首次加载默认同步第一页数据
        .onAppear {
            guard let firstLocation = multiLocationVM.weatherVM.first else { return }
            weatherVM.city = firstLocation.city
            firstLocation.page = 0
        }
    }
}

struct LocationView_Previews: PreviewProvider {
    static var previews: some View {
        LocationView(weatherVM: WeatherViewViewModel(city: "Phoenix"), multiLocationVM: MultiLocationViewModel())
    }
}

额外说明 #

• 如果需要默认打开时直接定位到某个指定城市的页面，只需要在视图加载时找到该城市在数组中的索引，把pageSelection的初始值设为对应索引即可，不要手动累加计算页码。
• 后续新增/删除城市列表时，因为tag是直接绑定数组索引的，TabView会自动更新页码对应关系，不需要手动维护页码映射。

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