如何在 SwiftUI Picker View 中设置文本样式？

Question

我在 SwiftUI 中有一个时间选择器，我对选择器中文本值的任何修改都将被忽略。我该如何正确地做到这一点？我在 Big Sur 上使用 Xcode 13。

这是未经任何修改的结果：

我希望时间更大更白，所以我添加了 .font() 和 .foregroundColor() 修饰符。这是我的代码：

struct TimerPicker: View {
    @Binding var customTime: CustomTime
    
    var body: some View {
        GeometryReader { geometry in
            HStack (spacing: 0.0){
                VStack {
                    Picker(selection: self.$customTime.selectedHour, label: Text("Hrs")) {
                        ForEach(0..<24) { hour in
                            Text("\(hour) hrs")
                                .foregroundColor(.white)
                                .font(.title3)
                        }
                    }
                }
                .frame(width: geometry.size.width * 0.33)
                .clipped()
                
                VStack {
                    Picker(selection: self.$customTime.selectedMin, label: Text("Min")) {
                        ForEach(0..<61) { min in
                            Text("\(min) min")
                                .foregroundColor(.white)
                                .font(.title3)
                        }
                    }
                }
                .frame(width: geometry.size.width * 0.33)
                .clipped()
                
                VStack {
                    Picker(selection: self.$customTime.selectedSecond, label: Text("Sec")) {
                        ForEach(0..<61) { sec in
                            Text("\(sec) sec")
                                .foregroundColor(.white)
                                .font(.title3)
                        }
                    }
                }
                .frame(width: geometry.size.width * 0.33)
                .clipped()
                .transition(.scale)
            }
        } //: Geometry
    }
}

选择器值的样式没有变化。这样做的正确方法是什么？

Answer 1

您的代码似乎对我有用，尽管我做了以下小的修改。 这是对我有用的代码： （注意没有 60 分钟或 60 秒）

import SwiftUI

@main
struct TestApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

struct ContentView: View {
    @State var customTime = CustomTime()
    
    var body: some View {
        Spacer()
        TimerPicker(customTime: $customTime)
        Spacer()
    }
}

struct CustomTime: Identifiable, Hashable {
    let id = UUID()
    var selectedHour = 0
    var selectedMin = 0
    var selectedSecond = 0
}

struct TimerPicker: View {
    @Binding var customTime: CustomTime
    
    var body: some View {
        GeometryReader { geometry in
            HStack (spacing: 0.0){
                VStack {
                    Picker(selection: $customTime.selectedHour, label: Text("Hrs")) {
                        ForEach(0..<24) { hour in
                            Text("\(hour) hrs").tag(hour) // <--- tag
                                .foregroundColor(.white)
                                .font(.title3)
                        }
                    }
                }
                .frame(width: geometry.size.width * 0.33)
                .clipped()
                
                VStack {
                    Picker(selection: $customTime.selectedMin, label: Text("Min")) {
                        ForEach(0..<60) { min in  // <--- only to 59
                            Text("\(min) min").tag(min) // <--- tag
                                .foregroundColor(.white)
                                .font(.title3)
                        }
                    }
                }
                .frame(width: geometry.size.width * 0.33)
                .clipped()
                
                VStack {
                    Picker(selection: $customTime.selectedSecond, label: Text("Sec")) {
                        ForEach(0..<60) { sec in  // <--- only to 59
                            Text("\(sec) sec").tag(sec) // <--- tag
                                .foregroundColor(.white)
                                .font(.title3)
                        }
                    }
                }
                .frame(width: geometry.size.width * 0.33)
                .clipped()
                .transition(.scale)
            }
            .pickerStyle(.wheel)    // <--- here
            .background(Color.red)  // <--- here
        } //: Geometry
    }
}