How to add padding on form segments in SwiftUI

Question

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

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.

user_5623035 · Answer

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:

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)

user_5727960 · Answer

It is possible with this modification to Form or List:

Form {
  Text("Hey")
}
.listStyle(GroupedListStyle())
.environment(\.horizontalSizeClass, .regular)

How to add padding on form segments in SwiftUI

2 Answers