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

Posted 2023-02-24

【中文标题】SwiftUI - 可滚动的 ListView，对象未正确呈现

【英文标题】：SwiftUI - Scrollable ListView, Objects Not Rendering Properly

【发布时间】：2021-01-08 06:56:44

【问题描述】：

我正在尝试使用自定义“项目”来实现 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 列表视图中多次使用这种方法，我可能错过了一些小东西，但任何一个都将不胜感激！

【参考方案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)
    

【讨论】：

哇，它修好了。您能否更深入地了解 GeomtryReader 的工作原理？当我需要制作相对于彼此的子视图，或者需要一些与帧大小相关的数学运算时，我倾向于经常使用它。我是 SwiftUI 的新手，来自 android...