adding a List to a View doesn't work as expected

Question

I'm busy with a screen in my app that is driving me nuts. I could use a good advice and code guidance. Here two screen dumps of the screen in action. The photo is fixed and stays put. The text below the photo, the picker and the rows can scroll.

I want my user to tap on the red lines to edit the values. I thought that I could easily make a List out of the rows. But as soon as I add a Line {} around the code the rows will not display anymore.

struct WeightListView: View {
    
    @Binding var descendingDays: Bool
    var egg: Egg
    
    var totalWeights : [ActualWeight] {
        var totalWeights = egg.actualWeights
        if descendingDays { totalWeights = totalWeights.sorted { $0.day > $1.day } }
        else { totalWeights = totalWeights.sorted { $0.day < $1.day } }
        return totalWeights
    }
    
    var body: some View {
        let count = totalWeights.reduce(0) { $1.measured ? $0 + 1 : $0 }
        VStack {
            HStack(alignment: .lastTextBaseline) {
                Text("Egg weights")
                    .font(.title2)
                    .padding(.top, 40)
                Spacer()
                Text("\(count) measurements")
                    .font(.callout)
                    .foregroundColor(.secondary)
            }
            .padding(EdgeInsets(top: -25, leading: 0, bottom: 0, trailing: 0))
        }
        
        ForEach(totalWeights, id: \.self) { totalWeight in
            VStack {
                HStack(alignment: .center) {
                    if totalWeight.measured {
                        Text("Day: \(totalWeight.day)")
                        .padding(10)
                        .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 10))
                        .foregroundColor(.green)
                    } else {
                        Text("Day: \(totalWeight.day)")
                        .padding(10)
                        .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 10))
                        .foregroundColor(.red)
                    }
                    Spacer()
                    Text("17 Apr")
                    Spacer()
                    Text("\(formatVar2(getal: totalWeight.weight)) gr")
                    Spacer()
                    Text("\(formatVar1(getal: totalWeight.prediction)) %")
                        .multilineTextAlignment(.trailing)
                }
                .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 10))
                .padding(EdgeInsets(top: -5, leading: 0, bottom: 0, trailing: 0))
            }
        }
    }
}

I tried to edit the code with a NavigationView and a List, like this:

NavigationView {
    List {
        ForEach(totalWeights, id: \.self) { totalWeight in
            NavigationLink(destination: WeightDetailView()) {
                
                VStack {
                    HStack(alignment: .center) {
                        if totalWeight.measured {
                            Text("Day: \(totalWeight.day)")
                                .padding(10)
                                .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 10))
                                .foregroundColor(.green)
                        } else {
                            Text("Day: \(totalWeight.day)")
                                .padding(10)
                                .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 10))
                                .foregroundColor(.red)
                        }
                        Spacer()
                        Text("17 Apr")
                        Spacer()
                        Text("\(formatVar2(getal: totalWeight.weight)) gr")
                        Spacer()
                        Text("\(formatVar1(getal: totalWeight.prediction)) %")
                            .multilineTextAlignment(.trailing)
                    }
                    .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 10))
                    .padding(EdgeInsets(top: -5, leading: 0, bottom: 0, trailing: 0))
                }
            }

The endresult is that all the rows are blanco and thus gone. I don't get why, can't you combine a List with other components in a View?

Answer 1

You need to wrap everything in another VStack. In this case the Navigation View does not add to the problem but it should be always your top layer.

NavigationView{
    VStack{
        VStack{
            // Your image and headline stuff
        }

        List{
            // ForEach ...
        }
    }
}

There is another thing I'd like to mention. It doesn't has to do with your problem but you can save a lot of double code by replacing this:

if totalWeight.measured {
    Text("Day: \(totalWeight.day)")
        .padding(10)
        .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 10))
        .foregroundColor(.green)
} else {
    Text("Day: \(totalWeight.day)")
        .padding(10)
        .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 10))
        .foregroundColor(.red)
}

by this:

Text("Day: \(totalWeight.day)")
        .padding(10)
        .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 10))
        .foregroundColor(totalWeight.measured ? .green : .red)