iPadOS中使用@StateObject时，程序化调用NavigationLink失效问题

问题现象 #

以下代码在iOS上运行正常，但在iPadOS中存在异常：点击列表中的某一项时，对应的详情视图会正常展示，但再次点击其他项时，详情视图不会更新。将LanguageDetail视图中的model改为@ObservedObject后即可正常运行，但实际项目中无法进行此修改。

复现代码 #

ContentView #

struct ContentView: View {
    let languages: [String] = ["Objective-C", "Java", "Python", "Swift", "Rust"]
    
    @State var selectedLanguage: String?
    
    var body: some View {
        NavigationView {
            List(languages, id: \.self) { language in
                Button(action: {selectedLanguage = language}) {
                    Text(language)
                        .bold()
                        .padding()
                }
            }
            .background {
                NavigationLink(isActive: $selectedLanguage.isPresent()) {
                    if let lang = selectedLanguage {
                        LanguageDetail(model: LanguageDetailModel(languageName: lang))
                    } else {
                        EmptyView()
                    }
                } label: {
                    EmptyView()
                }
            }
        }
    }
}

LanguageDetail及Model #

struct LanguageDetail: View {
    @StateObject var model: LanguageDetailModel
    var body: some View {
        VStack {
            Text(model.languageName)
                .font(.headline)
            Text("to rule them all...")
        }
    }
}

class LanguageDetailModel: ObservableObject {
    @Published var languageName: String
    
    init(languageName: String) {
        self.languageName = languageName
    }
}

依赖扩展 #

extension Binding {
    /// 将可选值的绑定投影为布尔值，标识其是否非空
    /// 写入`false`会将基础值置为`nil`，写入`true`无操作
    /// - 返回值：布尔值绑定，非空时返回`true`，否则返回`false`
    public func isPresent<Wrapped>() -> Binding<Bool>
    where Value == Wrapped? {
        .init(
            get: { self.wrappedValue != nil },
            set: { isPresent, transaction in
                if !isPresent {
                    self.transaction(transaction).wrappedValue = nil
                }
            }
        )
    }
}

问题原因 #

iPadOS的NavigationView默认采用分栏布局，此时NavigationLink的目标视图会被系统缓存复用。而@StateObject的生命周期与视图实例绑定，视图被缓存后不会重新初始化，新的selectedLanguage变化无法触发model的更新，导致详情页内容不变。

解决方案 #

方案1：给详情视图添加标识ID，强制刷新 #

通过给LanguageDetail添加id修饰符，绑定selectedLanguage，当选中项变化时，强制系统重新创建视图实例，从而初始化新的@StateObject：

NavigationLink(isActive: $selectedLanguage.isPresent()) {
    if let lang = selectedLanguage {
        LanguageDetail(model: LanguageDetailModel(languageName: lang))
            .id(lang) // 添加此行
    } else {
        EmptyView()
    }
} label: {
    EmptyView()
}

方案2：改用tag/selection模式的NavigationLink #

这种模式更适配iPadOS的分栏布局，能更可靠地触发视图更新：
修改ContentView的实现：

struct ContentView: View {
    let languages: [String] = ["Objective-C", "Java", "Python", "Swift", "Rust"]
    
    @State var selectedLanguage: String?
    
    var body: some View {
        NavigationView {
            List(languages, id: \.self) { language in
                NavigationLink(
                    destination: LanguageDetail(model: LanguageDetailModel(languageName: language)),
                    tag: language,
                    selection: $selectedLanguage
                ) {
                    Text(language)
                        .bold()
                        .padding()
                }
            }
        }
    }
}

此方案无需依赖isPresent扩展，且在iPadOS分栏布局下表现更稳定。

方案3：通过onChange更新model属性 #

如果不想重新创建视图实例，可以在LanguageDetail中监听外部传入的语言名称变化，手动更新model的属性：
首先修改LanguageDetail：

struct LanguageDetail: View {
    @StateObject var model: LanguageDetailModel
    let currentLanguage: String
    
    init(languageName: String) {
        self.currentLanguage = languageName
        self._model = StateObject(wrappedValue: LanguageDetailModel(languageName: languageName))
    }
    
    var body: some View {
        VStack {
            Text(model.languageName)
                .font(.headline)
            Text("to rule them all...")
        }
        .onChange(of: currentLanguage) { newLang in
            model.languageName = newLang
        }
    }
}

然后在ContentView中传递参数：

if let lang = selectedLanguage {
    LanguageDetail(languageName: lang)
} else {
    EmptyView()
}

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