在 SwiftUI 中设置选择器的样式答案

【问题标题】：Style the picker in SwiftUI在 SwiftUI 中设置选择器的样式
【发布时间】：2020-11-30 03:47:06
【问题描述】：

我在 Swiftui 中做一个登录表单，但是当我尝试添加一个包含年龄选择器的表单时，样式变得一团糟，因为我是 SwiftUI 的新手，我不知道如何解决这个问题？

如何修复选择器样式，使其与昵称字段相匹配？

这是我尝试过的代码：

@State var nickName: String = ""
@State var age: Int = 18

var body: some View {
VStack {
    
    
    
    HStack {
        
        Image(systemName: "person.circle.fill")
            .foregroundColor(Color("ChatiwVeryLightBlue"))
            .frame(width: 44, height: 44)
            .background(Color.white)
            .clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
            .shadow(color: Color.black.opacity(0.15), radius: 5, x: 0, y: 5)
            .padding(.all, 10)
        
        
        TextField("Nickname", text: $nickName)
            .frame(maxWidth: .infinity)
            .frame(height: 50)
    }
    
    Divider().padding(.leading, 80)
    
    
    HStack {
        
        Image(systemName: "person.circle.fill")
            .foregroundColor(Color("ChatiwVeryLightBlue"))
            .frame(width: 44, height: 44)
            .background(Color.white)
            .clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
            .shadow(color: Color.black.opacity(0.15), radius: 5, x: 0, y: 5)
            .padding(.all, 10)
        
      
        Form {
        Section {
            
            Picker(selection: $age, label: Text("Picker")) {
                ForEach(18 ..< 99, id: \.self) { index in
                    Text("\(index)").tag(1)
                }
            }
            
        }
        }
       
                
        
    }

    // Age
    // Country
    // Male/Female
    
    
}
.background(BlurView(blurType: .systemMaterial))
.clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
.padding()
.offset(y: 400)

【问题讨论】：

您是否尝试过可以使用pickerStyle(_:) 修饰符应用于选择器的不同选择器样式？请参阅this link 中的符合类型部分。例如，您可以尝试.pickerStyle(InlinePickerStyle())
我确实尝试过它们对我来说效果不佳
“我怎样才能修复选择器样式，使其与昵称字段相匹配？” - 你到底是什么意思？
@pawello2222 检查昵称字段？你看到设计怎么样了吗？我也希望选择器字段看起来与此字段相同。

标签： swift swiftui

【解决方案1】：

不确定您是否仍在从事此项目，但这是一个巧妙的解决方法：

struct ContentView: View {
    @State private var age = 18
    
    var body: some View {
        NavigationView {
            VStack {
                Divider()
                
                HStack {
                    NavigationLink(destination: AgePickerView(age: $age)) {
                        HStack {
                            Text("Age")
                            Spacer()
                            Text("\(age) >")
                                .padding(.trailing)
                        }
                    }
                }
                .foregroundColor(.gray)
                
                Divider()
            }
            .padding(.leading, 80)
        }
    }
    
    struct AgePickerView: View {
        @Binding var age: Int
        
        var body: some View {
            List(18..<99) { index in
                Button(action: {
                    self.age = index
                }) {
                    HStack {
                        Text("\(index)")
                        
                        Spacer()
                        
                        if index == age {
                            Image(systemName: "checkmark")
                                .foregroundColor(.blue)
                        }
                    }
                }
            }
        }
    }
}

要获得相同的 NavigationView 样式但删除 Form 样式，您需要将 NavigationLink 包装在 NavigationView 中。

我在 NavigationLink 中 Text 视图末尾放置的小 > 符号与 Form 样式中的符号不完全匹配，因此如果您愿意，可以四处寻找更相似的图像。

AgePickerView 非常简单；它只是一个按钮列表，它们通过点击手势修改与 ContentView 中原始状态变量的绑定。复选标记用于模仿 Picker 视图。

最好的部分是您不必担心使用选择器进行所有索引移动。

【讨论】：