SwiftUI-可滚动列表视图，对象未正确呈现

我试图实现一个带有自定义“项”的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)
                    }
                }
            }
        }
    }

这是输出

---

不知道我做错了什么。我已经多次使用此方法查看了许多可滚动列表，我可能错过了一些小的内容，但任何内容都将不胜感激

在任何可滚动容器中使用

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

---

不要在任何可滚动容器中使用未明确设置限制的

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

---

哇，这把它修好了。能否请您进一步深入了解GeometryReader的具体工作原理？当我需要制作相互相关的子视图，或者需要一些与帧大小相关的数学运算时，我经常使用它。我是新来的SwiftUI，来自Android…哇，这就解决了它。能否请您进一步深入了解GeometryReader的具体工作原理？当我需要制作相互相关的子视图，或者需要一些与帧大小相关的数学运算时，我经常使用它。我是SwiftUI的新手，来自Android。。。