I am developing an app that displays a clickable list of idioms. Everything works fine on an iPhone and on an iPad in landscape mode, but on an iPad in portrait mode it doesn't launch as desired. The behavior I want is to display the list with a randomly selected idiom beside the list (in landscape) or behind the list (in portrait). In landscape, it looks like this:
Here's the Swift UI code that displays the list (condensed for brevity):
struct ContentView: View {
var body: some View {
NavigationView {
IdiomsList() // display list of idioms
.navigationBarTitleDisplayMode(.inline)
if let idiom = idioms.random {
DetailView(idiom: idiom) // display random idiom
}
}
}
}
----------
struct IdiomsList: View {
var body: some View {
VStack() {
SearchBar(text: $searchText, active: $searchActive)
// SearchBar modifiers in here
List() {
ForEach(idioms.groups) { group in
let groupIdioms = filteredIdioms(for: group) // breakpoint 1
if (searchText.isEmpty && !showFavorites) || !groupIdioms.isEmpty {
Section(header: Text(group.name)) {
ForEach(groupIdioms) { idiom in
NavigationLink(destination: DetailView(idiom: idiom)) { // breakpoint 2
IdiomsRow(idiom: idiom)
}
}
}
}
}
}
// List modifiers here
}
}
}
I have set breakpoints (marked 1 and 2 above) to see how this behaves, and in landscape mode, it cycles through breakpoint 1 for every group, then cycles through breakpoint 2 for every idiom and displays the list beside a random idiom as shown above. However, in portrait mode it cycles through breakpoint 1 for every group, then simply displays a random idiom (image cropped vertically):
When I tap the Back button, it then cycles through breakpoint 2 and displays the list over the idiom (image cropped vertically):
I would like to display the list on launch in portrait mode. How can I do this?


