Search code examples
swiftlistviewuikitswiftuiios13

How to add padding on form segments in SwiftUI


In iOS 13, some native Apple apps use a list style I am struggling to recreate. It's basically a List within a Form containing Sections and some entries.

The only difference is that each Section has padding to the left and right side and a corner radius around the edges.

Here is an example from the Home app of what I would like to achieve (also used in the Timer tab in the Clock app):

iOS 13 Home app

Applying the .padding()-Modifier to the Form doesn't work.

struct ContentView: View {
   var body: some View {
      Form {
         Section {
            Text("foo")
            Text("bar")
         }
         Section {
            Text("foo")
         }
         Section {
            Text("bar")
         }
      }
   }
}

I am wondering if it is at all possible in SwiftUI or if this is just some UIKit-adjustment on a UITableViewCell.


Solution

  • This is new UITableView.Style called .insetGrouped. This is the documentation

    You can set it with code:

    let tableView = UITableView(frame: frame, style: .insetGrouped)
    

    Or with Interface builder:

    Ki

    SwiftUI doesn't have this style (yet), but in the future, it should be a ListStyle that you can use with .listStyle modifier on a list. Currently available styles are:

    .listStyle(DefaultListStyle()) // wich is PlainListStyle
    .listStyle(PlainListStyle())
    .listStyle(GroupedListStyle())
    // .listStyle(InsetGroupedListStyle()) // unresolved (yet)