Picker not showing inside List | SwiftUI

Question

I have a details screen on my app and for some reason when I try to put a picker inside the list I'm getting an empty gray box, and I can see it only if I scroll inside this gray box. Can someone help me, please?

Note: I'm a beginner in iOS development:-)

Thanks

My code:

struct GoalDetailsView: View {
    
    var id: String
    var authorId: String
    var name: String
    var description: String
    var startDate: String
    var endDate: String
    var numTarget: String
    var numUnit: String
    var category: String
    
    @State var numUnitIndex = 0
    
    var units = ["other", "Kg", "$$", "Km", "Hours", "Days", "Weeks", "%"]

    var body: some View {
        
        NavigationView {
            
            List {
                Button(action: {}, label: {
                    Text("Name: \(name)")
                })
                
                Button(action: {}, label: {
                    Text("Description: \(description)")
                })
                
                Button(action: {}, label: {
                    Text("Numerical Target: \(numTarget)")
                })
                
                Form {
                    Section {
                        Picker(selection: $numUnitIndex, label: Text("Numerical Unit")) {
                            ForEach(0 ..< units.count) {
                                Text(self.units[$0]).tag($0).foregroundColor(.blue)
                            }
                        }
                    }
                }

                
                    
                Spacer()
            }.navigationBarTitleDisplayMode(.inline)
            .navigationTitle("Goal Details")
        }
        
    }
}

struct GoalDetailsView_Previews: PreviewProvider {
    static var previews: some View {
        GoalDetailsView(id: "", authorId: "", name: "", description: "", startDate: "", endDate: "", numTarget: "", numUnit: "", category: "")
    }
}

Answer 1

you could try this, or some variation of it:

        Form {
            Section {
                Picker(selection: $numUnitIndex, label: Text("Numerical Unit")) {
                    ForEach(0 ..< units.count) {
                        Text(self.units[$0]).tag($0).foregroundColor(.blue)
                    }
                }
                .pickerStyle(.inline)  // <-- here
            }
        }.scaledToFit()  // <-- here