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

以下是该主题的代码

@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 .

我认为最好是做一个我不知道怎么做的Picker风格,但任何创造这个风格的东西都可以

推荐答案

虽然您可以实现一个定制的PickerStyle,但在ForEach中简单地使用一个定制的视图会更实用.

首先,创建要 for each 项目显示的视图.例如,在您提供的图像中,每个项目都有一个图像、一个Text标签和一个 Select 器按钮.因此,您的自定义视图可能如下所示:

struct CustomView: View {
    let forAppearance: Appearance

    VStack {

        //image

        //Text label

        //Button Selector

    }
}

然后,在您的body中,您可以在ForEach中使用您的自定义视图,从而 for each 项目提供一个视图:

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

附注:在您提供的代码中,您在Picker中使用了ForEach.由于ForEach通常用于重复自定义视图,而Picker用于重复默认/系统视图,因此通常使用eitherPickerForEach是个好主意,但不能同时使用两者.

Ios相关问答推荐

滚动时突出显示工具栏项目

设置托管在DigitalOcean上的iOS通用链接

一堆UIGraphics方法在iOS 17中被弃用,没有明确的替代方法?

如何在 Android 上的 Flutter 应用中录制内部音频?

Task.cancel() 的 TaskPriority 的区别

在 SwiftUI 中,绑定应该放在 ViewModel 中吗?

从iOS键盘输入时Flutter TextField输入消失

渲染的海边重定向在物理 iOS 设备上不起作用

.onAppear() 函数不适用于 NavigationLink

类型任何视图不能符合具有泛型的协议上的视图

通过 tuist/XcodeProj 以编程方式将文件添加到本机目标

SwiftUI NavigationLink 立即加载目标视图,无需单击

如何判断 `NSManagedObject` 是否已被删除?

从 NSData 或 UIImage 中查找图像类型

导航控制器自定义过渡动画

在 iPhone 中将 UIViewController 显示为弹出窗口

Swift - 获取设备的 WIFI IP 地址

Swift 中的日期到毫秒和回溯到日期

有没有办法在应用store 之外分发 ios 应用程序?

由于 GoogleSignIn、AdMob 提交应用程序时 iOS 10 GM 发布错误应用程序try 在没有使用说明的情况下访问隐私敏感数据