The iPhone Duo outer screen displays a vertical bar on the right edge with view contents inset. A SwiftUI Form displays an appropriate amount of leading padding but 0 padding on the trailing edge, since the vertical bar provides some visual margins already that looks nice. I have a view that looks kind of like a form, multiple stacked text fields, that should align the same way. I used scenePadding to achieve which looks correct on iPhone 18 Pro perfectly aligned with Form, but on iPhone Duo there is extra trailing padding. It doesn't align with my Edit button that remains in the horizontal axis navigation bar (and it is not inset enough on the leading edge, off by a few pixels, interestingly). Note when you unfold it and add the app on the left side in Split View, the vertical bar is on the leading edge, in which case there's too much padding on the leading edge. How can I achieve the correct layout padding/margins?
iPhone 18 Pro vs iPhone Duo:
My actual app:
struct ContentView: View {
var body: some View {
TabView {
NavigationStack {
SystemFormView()
.navigationTitle("System Form")
}
.tabItem {
Label("System Form", systemImage: "list.bullet.rectangle")
}
NavigationStack {
CustomFormView()
.navigationTitle("Custom Form")
}
.tabItem {
Label("Custom Form", systemImage: "rectangle.3.group")
}
}
}
}
private struct SystemFormView: View {
var body: some View {
Form {
Text("Row 1")
Text("Row 2")
Text("Row 3")
}
}
}
private struct CustomFormView: View {
var body: some View {
ScrollView {
VStack(spacing: 0) {
customRow("Row 1")
Divider()
.padding(.leading)
customRow("Row 2")
Divider()
.padding(.leading)
customRow("Row 3")
}
.background(.background)
.scenePadding(.horizontal)
}
.background(Color(uiColor: .systemGroupedBackground))
}
private func customRow(_ title: LocalizedStringKey) -> some View {
Text(title)
.frame(maxWidth: .infinity, minHeight: 44, alignment: .leading)
.padding(.horizontal)
}
}
Note in UIKit, UITableViewController with the inset grouped style has the same layout as Form. A custom view hierarchy can achieve the exact same placement/padding/margins by following these steps: create a scroll view and a content view, set preservesSuperviewLayoutMargins = true on both views, constrain the scroll view to the root view on all edges, constrain the content view to the scrollView.contentLayoutGuide on all edges, constrain the content view width anchor to the scrollView.frameLayoutGuide.widthAnchor, then constrain subviews of the content view to the contentView.layoutMarginsGuide. So I know how to do it in UIKit, how do we in SwiftUI? Thanks!
