0

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:

enter image description here

(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!

noloman
  • 11,411
  • 20
  • 82
  • 129
  • 1
    You have to give explicit height for internal List because by default it fill only parent provided available space, ie. one row with default height. However in general List-in-List seems bad pattern, think about Sections, or something... ie. different design. – Asperi Dec 10 '21 at 16:28
  • Thanks! Perhaps a ScrollView? Or LazyVStack? – noloman Dec 10 '21 at 17:03

0 Answers0