On iPhone Duo in the folded state, the outer screen displays a vertical bar on the right edge with view contents inset. I noticed Form displays an appropriate amount of leading padding but 0 padding on the trailing edge, since the vertical bar provides some padding already, so it 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 this and it looks correct on iPhone 18 Pro perfectly aligning with Form. Unfortunately on iPhone Duo there is extra trailing padding such that it doesn't align with the 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 padding?
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)
}
}