How to Remove Top Space of 'Form' in Swiftui

How to remove top space of `Form` in SwiftUI?

SwiftUI Form is actually a grouped style UITableView under the hood and that is default tableHeaderView. So you can remove it like this:

iOS 13

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 {
        ,,,
    }
}

iOS 14

Apple is limiting the appearance hack and setting the tableHeaderView's frame is one of them so we need to dig more around by adding these steps:

1. Use constraint instead of frame:

init() {
    let view = UIView()
    view.translatesAutoresizingMaskIntoConstraints = false
    view.heightAnchor.constraint(equalToConstant: 0).isActive = true
    UITableView.appearance().tableHeaderView = view
}

2. Force reload the table:

The constraint is added but it needs a reload. SwiftUI does not allow you to reload a list manually. So we need to add a dummy view and a dummy state to trick it:

@State var loaded = false // need for stay update
,,,

    List {

        if loaded {
            Text("Actual content of the list")

        } else {
            Text("Dummy content. Not important")
                .onAppear {
                    loaded = true // need for instatnt force update 
                }
        }

    }

---

Note1:

Try never hard-code any numbers (like -35 for inset!). Numbers vary on different devices and platforms and states and etc.

Note2:

.zero frame is not working. You should pass at least a minimum height if you use frame for iOS 13 or UIKit.

Note3:

All methods are hacks and Apple is trying to restrict access to underlying types like UITableView. So stay up to date and try to help the community.

Note4:

Contribute to the community by upvoting and commenting. So people will be more motivated to dig in unknown places and bring us cool stuff.

Note5:

Since we are using the Appearance proxy, any change will be applied to all TableViews in the app. You can store the state of the original Appearance -> apply the new style onAppear and restore the original onDisaper if needed.

Remove top padding from `List` in SwiftUI

Firstly, I would say that GroupedListStyle is working as intended.

On iOS, the grouped list style displays a larger header and footer
than the plain style, which visually distances the members of
different sections.

You say you have tried this, but it does work for me (Xcode 12.5.1):

    List { ... }    
    .onAppear(perform: {
        UITableView.appearance().contentInset.top = -35
    })

You could also hide the list header, by using a ZStack with the List at the bottom of the stack and the Picker over the top. The Picker does have transparency, so you would also have to add an opaque view to act as background for the Picker.

var body: some View {
    NavigationView {
        ZStack(alignment: .top) {
            List { ... }
            .listStyle(.grouped)
            .padding(.top, 30)
            
            Color.white
                .frame(height: 65)
            
            Picker { ... }
            .pickerStyle(.segmented)
            .padding()
        }
        .navigationBarTitle("Add Task", displayMode: .inline)
    }
}

As far as I can see this just appears the same as PlainListStyle would do, but I assume you have a particular reason for wanting to use GroupedListStyle.

Remove SwiftUI Form padding

Here is a solution. Tested with Xcode 11.4 / iOS 13.4

  Image(uiImage: someImage)
    .resizable()
    .aspectRatio(contentMode: .fill)
    .listRowInsets(EdgeInsets())        // << this one !!

Note: hardcode to UIScreen.main.bounds.width is not needed

How to eliminate the space above Section in SwiftUI Form?

The solution is to use a Section with an EmptyView() and place the view you want to be at the top in the header of this Section

 var body: some View {
        VStack {
            Text("Text 1")
            Form {
                Section(header: VStack(alignment: .center, spacing: 0) {
                    Text("Text 2").padding(.all, 16)
                        .frame(width: UIScreen.main.bounds.width, alignment: .leading)
                        .background(Color.white)
                }) {
                    EmptyView()
                }.padding([.top], -6)
            }
        }
    }

SwiftUI Can't Remove Space Above Picker - Form Version

You can remove upper and lower space of Form by adding below code

struct ContentView: View {

    init() {
         UITableView.appearance().tableHeaderView = UIView(frame: CGRect(x: 0, y: 0, width: 0, height: Double.leastNonzeroMagnitude))
         UITableView.appearance().tableFooterView = UIView(frame: CGRect(x: 0, y: 0, width: 0, height: Double.leastNonzeroMagnitude))
    }

  //your code .....
}

when placing items in the toolbar, How do you remove the space where a navigation title would go

putting .navigationBarTitleDisplayMode(.inline) on the VStack fixes this issue. (credit: ChrisR for the comment)

---

Related Topics