3

I'm tying to make a picker style that looks like this enter image description here

Here is the code for the theme

@main
struct GreenPowerPlantUniversalApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .modifier(DarkModeViewModifier())
        }
    }
    class AppThemeViewModel: ObservableObject {
        @AppStorage("appThemeSetting") var appThemeSetting = Appearance.system
    }
    
    struct DarkModeViewModifier: ViewModifier {
        @ObservedObject var appThemeViewModel: AppThemeViewModel = AppThemeViewModel()
        
        public func body(content: Content) -> some View {
            content
                .preferredColorScheme((appThemeViewModel.appThemeSetting == .system) ? .none : appThemeViewModel.appThemeSetting == .light ? .light : .dark)
        }
    }
    
    enum Appearance: String, CaseIterable, Identifiable  {
        case system
        case light
        case dark
        var id: String { self.rawValue }
    }
}
    struct ThemeSettingsView: View {
        @AppStorage("appThemeSetting") var appThemeSetting = GreenPowerPlantUniversalApp.Appearance.system
        
        var body: some View {
            VStack {
                    Picker("Appearance", selection: $appThemeSetting) {
                        ForEach(GreenPowerPlantUniversalApp.Appearance.allCases) { appearance in
                            Text(appearance.rawValue.capitalized)
                                .tag(appearance)
                        }
                    }
                    .pickerStyle(SegmentedPickerStyle())
            }.padding(.bottom, 100)
                .padding(.horizontal, 20)
        }
    }

I just don't know where to start to create this as I'm a beginner to swift.

I think it would be best to make a picker style which I don't know how to do but anything to create this would work

Ash
  • 81
  • 9
  • 1
    It'd probably be better to just use a `ForEach` view rather than a custom picker style. Practically they produce the same result. – Stoic Sep 24 '22 at 20:55
  • 1
    @Stoic i have no idea how to do that or what you mean as i a begginer if you could show me an example and what it does that would help me – Ash Sep 24 '22 at 21:03
  • 1
    You used a `ForEach` in your example, it's the same as that. I'll try an example tho – Stoic Sep 24 '22 at 21:21

1 Answers1

1

While you might be able to implement a custom PickerStyle, it would be more practical to simply use a custom view in a ForEach.

First, create a view that you want shown for each item. For example, in the image you provided, each item has an image, a Text label, and a selector button. So your custom view might look something like this:

struct CustomView: View {
    let forAppearance: Appearance

    VStack {

        //image

        //Text label

        //Button Selector

    }
}

Then, in your body, you can use your custom view in a ForEach, thus giving each item a view:

var body: some View {
    HStack {
        ForEach(GreenPowerPlantUniversalApp.Appearance.allCases) { appearance in
            CustomView(forAppearance: appearance)
    }
}

Side note: In the code you provided, you used a ForEach inside of a Picker. Since ForEach is usually used to repeat a custom view, and Picker is used to repeat a default/system view, it's generally a good idea to use either a Picker or a ForEach, but not both.

Stoic
  • 945
  • 12
  • 22