在SwiftUI中设置选择器的样式

我在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)

@状态变量昵称：String=“”
@状态变量年龄：Int=18
var body：一些观点{
VStack{
HStack{
图像（系统名称：“person.circle.fill”）
.foregroundColor（颜色（“ChatiwVeryLightBlue”））
.框架（宽度：44，高度：44）
.背景（颜色.白色）
.clipShape（圆角矩形（圆角半径：16，样式：连续））
阴影（颜色：颜色。黑色。不透明度（0.15），半径：5，x:0，y:5）
.padding（.all，10）
TextField（“昵称”，text:$昵称）
.frame（最大宽度：。无穷大）
.框架（高度：50）
}
分隔符（）.填充（.leading，80）
HStack{
图像（系统名称：“person.circle.fill”）
.foregroundColor（颜色（“ChatiwVeryLightBlue”））
.框架（宽度：44，高度：44）
.背景（颜色.白色）
.clipShape（圆角矩形（圆角半径：16，样式：连续））
阴影（颜色：颜色。黑色。不透明度（0.15），半径：5，x:0，y:5）
.padding（.all，10）
形式{
部分{
选择器（选择：$age，标签：Text（“选择器”））{
ForEach（18..<99，id:\.self）{中的索引
文本（“\（索引）”）。标记（1）
}
}
}
}
}
//年龄
//国家
//男/女
}
.background（模糊视图（模糊类型：.systemMaterial））
.clipShape（圆角矩形（圆角半径：16，样式：连续））
.padding（）
.偏移量（y:400）

---

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

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

struct ContentView:View{
@国有-私有var年龄=18
var body：一些观点{
导航视图{
VStack{
分隔器（）
HStack{
导航链接（目的地：AgePickerView（年龄：$age））{
HStack{
文本（“年龄”）
垫片（）
文本（“\（年龄）>”）
.padding（.training）
}
}
}
.foregroundColor（.灰色）
分隔器（）
}
.padding（.leading，80）
}
}
结构AgePickerView:视图{
@绑定变量年龄：Int
var body：一些观点{
列表（18..我在NavigationLink中文本视图末尾的符号与表单样式中的符号不完全匹配，因此如果您愿意，可以四处查看更相似的图像

AgePickerView相当直截了当；它只是一个按钮列表，通过点击手势修改ContentView中原始状态变量的绑定。复选标记用于模拟Picker视图

最好的一点是，您不必担心选择器会导致索引移动。
不确定您是否仍在处理此项目，但这里有一个简单的解决方法：

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

struct ContentView:View{
@国有-私有var年龄=18
var body：一些观点{
导航视图{
VStack{
分隔器（）
HStack{
导航链接（目的地：AgePickerView（年龄：$age））{
HStack{
文本（“年龄”）
垫片（）
文本（“\（年龄）>”）
.padding（.training）
}
}
}
.foregroundColor（.灰色）
分隔器（）
}
.padding（.leading，80）
}
}
结构AgePickerView:视图{
@绑定变量年龄：Int
var body：一些观点{
列表（18..我在NavigationLink中文本视图末尾的符号与表单样式中的符号不完全匹配，因此如果您愿意，可以四处查看更相似的图像

AgePickerView相当直截了当；它只是一个按钮列表，通过点击手势修改ContentView中原始状态变量的绑定。复选标记用于模拟Picker视图

这其中最好的部分是，您不必担心选择器的所有索引移动。
您是否尝试过使用修饰符可以应用于选择器的不同选择器样式？请参阅中的“一致性类型”部分。例如，您可以尝试
.pickerStyle（InlinePickerStyle（））
我确实尝试过，但它们对我来说效果不好“如何修复选择器样式，使其添加昵称字段？”-你的确切意思是什么？@pawello2222检查昵称字段？你看到设计了吗？我希望选取器字段也与此字段相同。你是否尝试过使用修饰符可应用于选取器的不同选取器样式？请参阅中的“一致性类型”部分。例如，你可以尝试
.pickerStyle（InlinePickerStyle（））
我确实尝试过它们对我来说不太好“我如何修复选择器样式，使其与昵称字段相匹配？”-你的确切意思是什么？@pawello2222检查昵称字段？你看到设计了吗？我希望选择器字段也与此字段相同。