ios – Customized Binding property inside View doesn’t replace that View when modified

@AppStorage would not work as you’d anticipate when utilized in an @Observable class, however there are methods round it. See the query Is there any means to make use of @AppStorage with @Observable? for some options.

Mainly, used such as you did it won’t drive state modifications to your view in a means that can permit it to show the up to date worth chosen within the Picker.

However this is one other option to go about it that can even perhaps streamline your code. As an alternative of utilizing @AppStorage in your class, take away it and use a didSet closure to replace UserDefaults each time the worth modifications. Use the initializer to set the preliminary worth:

@Observable
class LanguageSettings {
    static let shared = LanguageSettings()
    
    var currentLanguage: String {
        didSet {
            UserDefaults.commonplace.set(currentLanguage, forKey: "currentLanguage")
        }
    }
    
    personal init() {
        currentLanguage = UserDefaults.commonplace.string(forKey: "currentLanguage") ?? ""
    }
}

Then, you possibly can replace the worth usually:

@Bindable var settings = LanguageSettings.shared

//...

Picker("Choose language", choice: $settings.currentLanguage) {
//...
}

And in addition show it:

Textual content(settings.currentLanguage)

Various:

You may additionally simply use @AppStorage because it’s meant (as a state that drives UI modifications), by together with it in each your view and the editor/picker, and utilizing the observable class property for merely studying it (though it should nonetheless not be observable with out @AppStorage current within the view).

Each strategies are proven within the instance code beneath. You’ll be able to experiment by eradicating the AppStorage state from the settings view and simply referencing the settings.username property within the labeled content material’s worth, to see that the up to date worth within the editor will now solely present after a view refresh (as a result of lacking AppStorage state, with out which there isn’t any state being tracked or mutated in reminiscence).

This is the complete working code:

import SwiftUI

@Observable
class LanguageSettings {
    static let shared = LanguageSettings()
    
    //This property units the worth in consumer defaults when the worth modifications (and likewise retrieves it for studying)
    var currentLanguage: String {
        didSet {
            UserDefaults.commonplace.set(currentLanguage, forKey: "currentLanguage")
        }
    }
    
    //This property simply reads the worth from consumer defaults
    var username: String {
        UserDefaults.commonplace.string(forKey: "username") ?? ""
    }
    
    personal init() {
        currentLanguage = UserDefaults.commonplace.string(forKey: "currentLanguage") ?? ""
    }
}


struct LanguageSettingsView: View {
    
    //Observables
    let settings = LanguageSettings.shared
    
    //State values
    @State personal var showSheet = true
    
    //Person defaults
    @AppStorage("username") personal var username: String = "user123"
    
    //Physique
    var physique: some View {
        
        Listing {
            LabeledContent {
                Button {
                    showSheet.toggle()
                } label: {
                    Textual content(username)
                }
            } label : {
                Textual content("Username")
                Textual content("From settings: (settings.username)")
            }
            
            LabeledContent("Chosen language") {
                Button {
                    showSheet.toggle()
                } label: {
                    Textual content(settings.currentLanguage)
                }
            }
        }
        .contentMargins(.vertical, 20)
        .sheet(isPresented: $showSheet) {
            LanguageSettingsEditorView()
                .presentationDetents([.height(150)])
                .presentationBackgroundInteraction(.enabled)
                .presentationDragIndicator(.seen)
        }
    }
}

struct LanguageSettingsEditorView: View {
    
    //Observables
    @Bindable var settings = LanguageSettings.shared
    
    //Setting values
    @Setting(.dismiss) var dismiss

    //Person defaults
    @AppStorage("username") personal var username: String = "user123"
    
    //Physique
    var physique: some View {
        
        Kind {
            Part {
                //Username
                LabeledContent("Set username") {
                    TextField("Username", textual content: $username)
                        .fixedSize()
                        .multilineTextAlignment(.trailing)
                }
                
                //Language picker
                Picker("Choose language", choice: $settings.currentLanguage) {
                    Textual content("English").tag("English")
                    Textual content("French").tag("French")
                    Textual content("Spanish").tag("Spanish")
                }
            } header: {
                HStack {
                    Textual content("Change language")
                    Spacer()
                    Button {
                        dismiss()
                    } label: {
                        Picture(systemName: "xmark.circle.fill")
                            .imageScale(.small)
                    }
                }
            }
        }
    }
}

//Preview
#Preview {
    NavigationStack {
        LanguageSettingsView()
            .navigationTitle("Settings")
    }
}

Word: In your case, the observable is a property of a singleton and requires passing to a view, however the code above makes use of a simplified method, the place the editor accesses the singleton instantly. I believe you may get the concept.