I have a view that creates a List, and using a ForEach, iterates over a list of children, and each of those children is rendered inside a view. The problem is that the child view is also composed of a List, so I end up having the following image:
(I have also uploaded a short video recorded in my simulator here; if there's a better way and service to which I can upload a video, please let me know).
Basically, the child list occupies as much as a row in the parent list, although it can be scrolled, I would like the child view to occupy more space in order to look normal.
Here's the code for my parent view:
var body: some View {
GeometryReader { proxy in
List {
let subworkoutsArray: [Subworkout] = workout.containsSubworkouts?.toArray() ?? []
ForEach(subworkoutsArray, id: \.self) { (subworkout: Subworkout) in
Section(header: SubworkoutHeaderView(subworkout: subworkout)) {
SubworkoutView(subworkout: subworkout, shouldShowFooterView: false, proxy: proxy)
}
}
HStack {
FooterTimerView(workout: self.$workout)
}
.listRowInsets(EdgeInsets())
.frame(maxWidth: .infinity, minHeight: 60)
}
.listStyle(.grouped)
.navigationTitle(workout.workoutName)
.navigationBarTitleDisplayMode(.inline)
}
}
and this is the code for the SubworkoutView:
var body: some View {
List {
ForEach(subworkout.containsExercises?.toArray() ?? [], id: \.self) { (exercise: Exercise) in
showExerciseInfo(exercise)
}
if shouldShowFooterView {
HStack {
FooterTimerView(subworkout: self.$subworkout)
}
.listRowInsets(EdgeInsets())
.frame(maxWidth: .infinity, minHeight: 60)
}
}
.listStyle(.grouped)
.if(proxy != nil, content: { content in
content.frame(width: proxy!.size.width, height: proxy!.size.height, alignment: .top)
})
}
I have tried several options, like placing the GeometryReader in the parent view right before the child view is called, but it makes it even worse.
Thanks in advance!