SwiftUI - 可滚动的 ListView，对象未正确呈现

Question

我正在尝试使用自定义“项目”来实现 ScrollView，但由于某种原因，每个项目都呈现堆叠在一起。

这里是返回包含项目 VStack 的 ScollView 的方法。

private func dailyEventsView(width: CGFloat) -> some View {
        
        var events = dailyData.getEvents()
        
        return ScrollView {
            VStack(alignment: .center, spacing: 10) {
                ForEach (0 ..< events.count) { i in
                    if (events[i].getType() == EventType.WATER) {
                        WaterCardView(event: events[i] as! WaterEvent)
                            .frame(width: width)
                    }
                }
            }
        }
    }

这里是“WaterCadView”。

struct WaterCardView : View {
    
    @ObservedObject var event: WaterEvent
    
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                RoundedRectangle(cornerRadius: 25.0).fill(Color.gray).opacity(0.05)
                
                VStack(alignment: .leading) {
                    event.getCardViewHeader()

                    // Just a series of progress bars, does not affect output.
                    WaterProgressBar(max: event.max, progress: event.progress, current: event.current)
                        // Height should be same as progress bar thickness
                        .frame(height: 10.0)
                }.padding()
            }
        }
        .padding(.leading, 10)
        .padding(.trailing, 10)
    }
}

这是输出...

Simulator output

不知道我做错了什么。我已经在很多 Scrollable 列表视图中多次使用这种方法，我可能错过了一些小东西，但任何一个都将不胜感激！

Answer 1

不要在任何可滚动容器中没有明确设置限制的情况下使用GeometryReader，因为它会混淆 SwiftUI 布局引擎（您可以观察到）。

在你的场景中，我假设你想要类似的东西

struct WaterCardView : View {
    
    @ObservedObject var event: WaterEvent
    
    var body: some View {
        VStack(alignment: .leading) {
            event.getCardViewHeader()

            // Just a series of progress bars, does not affect output.
            WaterProgressBar(max: event.max, progress: event.progress, current: event.current)
                // Height should be same as progress bar thickness
                .frame(height: 10.0)
        }.padding()
        .background(
            RoundedRectangle(cornerRadius: 25.0).fill(Color.gray).opacity(0.05)
        )
        .padding(.leading, 10)
        .padding(.trailing, 10)
    }
}