ios - 我正在尝试制作一种选择器样式，例如设置中的外观选择器

Question

我打算制作一个看起来像这样的选择器样式

主题代码如下

@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)
        }
    }

我只是不知道从哪里开始创建它，因为我是初学者 swift 。

我认为最好制作一个我不知道该怎么做的选择器样式，但是创建它的任何东西都可以工作

Answer 1

虽然您可以实现自定义 PickerStyle，但在 ForEach 中简单地使用自定义 View 会更实用。

首先，创建一个要为每个项目显示的 View 。例如，在您提供的图像中，每个项目都有一个图像、一个 Text 标签和一个选择器按钮。所以您的自定义 View 可能看起来像这样:

struct CustomView: View {
    let forAppearance: Appearance

    VStack {

        //image

        //Text label

        //Button Selector

    }
}

然后，在您的 body 中，您可以在 ForEach 中使用您的自定义 View ，从而为每个项目提供一个 View :

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

旁注:在您提供的代码中，您在 Picker 中使用了 ForEach。由于 ForEach 通常用于重复自定义 View ，而 Picker 用于重复默认/系统 View ，通常最好使用任一个 Picker 或 ForEach，但不能同时使用。