SwiftUI中ObservedObject与State对象的预览配置问题

问题场景 #

现有MainView代码如下：

struct MainView: View {
    
    // The app's model that the containing scene passes in
    @ObservedObject var model: MainViewModel
    @State var activeTab = 0
    
    var body: some View {
        VStack {
            TabView(selection: $activeTab) {
                Group {
                    WorldView(model: model, activeTab: $activeTab)
                        .tabItem {
                            Label(Tabs.explore.rawValue, systemImage: Tabs.explore.icon)
                                .environment(\.symbolVariants, .none)
                        }
                        .tag(0)
                    ListView(model: model, activeTab: $activeTab)
                        .tabItem {
                            Label(Tabs.list.rawValue, systemImage: Tabs.list.icon)
                                .environment(\.symbolVariants, .none)
                        }
                        .tag(1)
                    FavoritesView(activeTab: $activeTab)
                        .tabItem {
                            Label(Tabs.favorite.rawValue, systemImage: Tabs.favorite.icon)
                                .environment(\.symbolVariants, .none)
                        }
                        .tag(2)
                    ProfileView(model: model, activeTab: $activeTab)
                        .tabItem {
                            Label(Tabs.profile.rawValue, systemImage: Tabs.profile.icon)
                                .environment(\.symbolVariants, .none)
                        }
                        .tag(3)
                }
                .environmentObject(model)
            }
            .tint(.accentColor)
            .onChange(of: activeTab, perform: { value in
                log.info("\n 🟢: (MainView: 46) - User has selected tab: \(value).")
                print("")
            })
        }
        .onAppear() {
            model.fetchPlaces()
        }
    }
}

初始预览代码及错误 #

初始预览代码：

struct MainView_Previews: PreviewProvider {
    static var previews: some View {
        MainView(model: model, activeTab: activeTab)
    }
}

报错信息：

Cannot find 'activeTab' in scope
Cannot find 'model' in scope

修改后的尝试及错误 #

尝试给PreviewProvider添加实例属性，出现新错误：

struct MainView_Previews: PreviewProvider {
    @ObservedObject var model: MainViewModel
    @State var activeTab = 0
    static var previews: some View {
        MainView(model: model, activeTab: activeTab)
    }
}

报错信息：

Instance member 'activeTab' cannot be used on type 'MainView_Previews'
Instance member 'model' cannot be used on type 'MainView_Previews'

正确解决方案 #

核心问题分析 #

1. previews是静态属性，只能访问静态上下文的变量，无法直接调用PreviewProvider的实例成员（比如@ObservedObject、@State标记的属性）
2. MainView的activeTab是内部@State属性，属于视图自身维护的状态，不需要在初始化时传入

基础版正确预览代码 #

struct MainView_Previews: PreviewProvider {
    static var previews: some View {
        // 在静态上下文创建预览专用的ViewModel实例
        let previewModel = MainViewModel()
        // 初始化MainView，仅传入required的model参数
        MainView(model: previewModel)
    }
}

进阶：预览特定Tab状态 #

如果需要预览指定选中的Tab，可以通过状态包装器实现，比如预览第二个Tab（tag=1）：

struct MainView_Previews: PreviewProvider {
    static var previews: some View {
        let previewModel = MainViewModel()
        // 使用状态包装器传递初始选中的Tab值
        StatefulPreviewWrapper(1) { activeTab in
            MainView(model: previewModel)
                .onAppear {
                    // 强制设置初始选中的Tab
                    activeTab.wrappedValue = 1
                }
        }
    }
}

// 状态包装器，用于在静态预览中处理状态
struct StatefulPreviewWrapper<Value, Content: View>: View {
    @State var value: Value
    var content: (Binding<Value>) -> Content
    
    init(_ value: Value, content: @escaping (Binding<Value>) -> Content) {
        self._value = State(initialValue: value)
        self.content = content
    }
    
    var body: some View {
        content($value)
    }
}

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