form top row

how do i get rid of this grey top row?

 var body: some View {
     
    NavigationView {
    Form {
      HStack {

        Form {
          
          TextField("pH", text: $viewModel.pH)
            .modifier(TextFieldClearButton(text: $viewModel.pH))
          TextField("pCO2", text: $viewModel.pCO2)
            .modifier(TextFieldClearButton(text: $viewModel.pCO2))
           
          TextField("HCO3", text: $viewModel.HCO3)
            .modifier(TextFieldClearButton(text: $viewModel.HCO3))
          TextField("Glu", text: $viewModel.Glu)
            .modifier(TextFieldClearButton(text: $viewModel.Glu))
          
           Spacer()

         
         
        }.frame(width: /*@START_MENU_TOKEN@*/150.0/*@END_MENU_TOKEN@*/, height: 200).lineSpacing(/*@START_MENU_TOKEN@*/5.0/*@END_MENU_TOKEN@*/)
       

        Form {
          
           TextField("Na", text: $viewModel.Na)
             .modifier(TextFieldClearButton(text: $viewModel.Na))
           TextField("K", text: $viewModel.K)
             .modifier(TextFieldClearButton(text: $viewModel.K))
           TextField("Cl", text: $viewModel.Cl)
             .modifier(TextFieldClearButton(text: $viewModel.Cl))
           TextField("Alb", text: $viewModel.Alb)
             .modifier(TextFieldClearButton(text: $viewModel.Alb))
           
        }.frame(width: /*@START_MENU_TOKEN@*/150.0/*@END_MENU_TOKEN@*/, height: /*@START_MENU_TOKEN@*/200.0/*@END_MENU_TOKEN@*/)
         .lineSpacing(/*@START_MENU_TOKEN@*/5.0/*@END_MENU_TOKEN@*/)
Answered by Claude31 in 714252022

Form is in fact a groupStyle TableView…

  • To achieve what you want, you need to set the appearance.

Credit: https://stackoverflow.com/questions/58681243/how-to-remove-top-space-of-form-in-swiftui

struct ContentView: View {
    
    init() { // this can be done in `onAppear` modifier if you need to restore the appereance later on `onDisappear`
        UITableView.appearance().tableHeaderView = UIView(frame: CGRect(x: 0, y: 0, width: 0, height: Double.leastNonzeroMagnitude))
    }

    var body: some View {
        
        NavigationView {
            Form {
                HStack {
                    
                    Form {
                        TextField("pH", text: $viewModel.pH)
                            .modifier(TextFieldClearButton(text: $viewModel.pH))
                        TextField("pCO2", text: $viewModel.pCO2)
                            .modifier(TextFieldClearButton(text: $viewModel.pCO2))
                        TextField("HCO3", text: $viewModel.HCO3)
                            .modifier(TextFieldClearButton(text: $viewModel.HCO3))
                        TextField("Glu", text: $viewModel.Glu)
                            .modifier(TextFieldClearButton(text: $viewModel.Glu))
                        
                       Spacer()  // needed only if height > 160
                    }
                    .frame(width: 150.0, height: 200.0)
                    .lineSpacing(5.0)
                    
                    Form {
                        TextField("Na", text: $viewModel.Na)
                            .modifier(TextFieldClearButton(text: $viewModel.Na))
                        TextField("K", text: $viewModel.K)
                            .modifier(TextFieldClearButton(text: $viewModel.K))
                        TextField("Cl", text: $viewModel.Cl)
                            .modifier(TextFieldClearButton(text: $viewModel.Cl))
                        TextField("Alb", text: $viewModel.Alb)
                           .modifier(TextFieldClearButton(text: $viewModel.Alb))
                       Spacer()  // needed only if height > 160
                    }
                    .frame(width: 150.0, height: 200.0)
                    .lineSpacing(5.0)
                    
                }
            }
            .navigationTitle("Composition")
        }
    }
}
  • And get this:

Accepted Answer

Form is in fact a groupStyle TableView…

  • To achieve what you want, you need to set the appearance.

Credit: https://stackoverflow.com/questions/58681243/how-to-remove-top-space-of-form-in-swiftui

struct ContentView: View {
    
    init() { // this can be done in `onAppear` modifier if you need to restore the appereance later on `onDisappear`
        UITableView.appearance().tableHeaderView = UIView(frame: CGRect(x: 0, y: 0, width: 0, height: Double.leastNonzeroMagnitude))
    }

    var body: some View {
        
        NavigationView {
            Form {
                HStack {
                    
                    Form {
                        TextField("pH", text: $viewModel.pH)
                            .modifier(TextFieldClearButton(text: $viewModel.pH))
                        TextField("pCO2", text: $viewModel.pCO2)
                            .modifier(TextFieldClearButton(text: $viewModel.pCO2))
                        TextField("HCO3", text: $viewModel.HCO3)
                            .modifier(TextFieldClearButton(text: $viewModel.HCO3))
                        TextField("Glu", text: $viewModel.Glu)
                            .modifier(TextFieldClearButton(text: $viewModel.Glu))
                        
                       Spacer()  // needed only if height > 160
                    }
                    .frame(width: 150.0, height: 200.0)
                    .lineSpacing(5.0)
                    
                    Form {
                        TextField("Na", text: $viewModel.Na)
                            .modifier(TextFieldClearButton(text: $viewModel.Na))
                        TextField("K", text: $viewModel.K)
                            .modifier(TextFieldClearButton(text: $viewModel.K))
                        TextField("Cl", text: $viewModel.Cl)
                            .modifier(TextFieldClearButton(text: $viewModel.Cl))
                        TextField("Alb", text: $viewModel.Alb)
                           .modifier(TextFieldClearButton(text: $viewModel.Alb))
                       Spacer()  // needed only if height > 160
                    }
                    .frame(width: 150.0, height: 200.0)
                    .lineSpacing(5.0)
                    
                }
            }
            .navigationTitle("Composition")
        }
    }
}
  • And get this:

form top row
 
 
Q