将列表添加到视图无法按预期工作

Question

我正忙于处理应用程序中的屏幕，这让我抓狂。我可以使用好的建议和代码指导。这里有两个正在运行的屏幕转储。照片已固定并保持不变。照片下方的文字、选择器和行可以滚动。

我希望我的用户点击红线来编辑值。我以为我可以轻松地从行中创建一个列表。但是只要我在代码周围添加一行{}，这些行就不会再显示了。

struct WeightListView: View {
    
    @Binding var descendingDays: Bool
    var egg: Egg
    
    var totalWeights : [ActualWeight] {
        var totalWeights = egg.actualWeights
        if descendingDays { totalWeights = totalWeights.sorted { [=10=].day > .day } }
        else { totalWeights = totalWeights.sorted { [=10=].day < .day } }
        return totalWeights
    }
    
    var body: some View {
        let count = totalWeights.reduce(0) { .measured ? [=10=] + 1 : [=10=] }
        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))
            }
        }
    }
}

我尝试使用 NavigationView 和 List 编辑代码，如下所示：

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))
                }
            }

最终结果是所有的行都是空白的，因此消失了。我不明白为什么，您不能将 List 与 View 中的其他组件结合起来吗？

Answer 1

您需要将所有内容包装在另一个 VStack 中。在这种情况下，导航视图不会增加问题，但它应该始终是您的顶层。

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

        List{
            // ForEach ...
        }
    }
}

还有一件事我想提一下。它与您的问题无关，但您可以通过替换来节省大量双代码这个：

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)
}

通过这个：

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

将列表添加到视图无法按预期工作

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

swiftui