SwiftUI 使用 Geometry Reader 和 ForEach

问题描述

我不明白为什么我的 ForEach 循环使我的视图无法在其父视图中正确缩放。如果我注释掉 ForEach 循环并取消注释 //.frame(width: geometry.size.width,height: 10)，则 RoundedRectangle 在其父视图中正确缩放，但是当使用 ForEach 循环时，我的视图会流出屏幕。我已经仔细检查了 CGFloat((sleepOrAwakeSpan.seconds / DataStore.sleepOrAwakeSpans.map { $0.endTime.timeIntervalSince($0.startTime) }.reduce(0,+))) total = 100。所以我知道几何是正确的，而且我知道我预期的几何百分比是正确的，什么可能导致添加 ForEach 使其流出屏幕？ ?

struct AsleepTimeView: View {

    @EnvironmentObject var dataStore: DataStore

     static let sleepTimeFormat: DateFormatter = {
        let formatter = DateFormatter()
        formatter.dateStyle = .none
        formatter.timeStyle = .short
        return formatter
     }()
    
    
    var body: some View {
        Color.clear.overlay(
        GeometryReader { geometry in
            vstack(alignment: .center) {
                HStack {
                    ForEach(DataStore.sleepOrAwakeSpans) { sleepOrAwakeSpan in    
                            RoundedRectangle(cornerRadius: 5)
                                .frame(width: geometry.size.width * CGFloat((sleepOrAwakeSpan.seconds / DataStore.sleepOrAwakeSpans.map { $0.endTime.timeIntervalSince($0.startTime) }.reduce(0,+))),height: 10)
                                //.frame(width: geometry.size.width,height: 10)
                                .foregroundColor(sleepOrAwakeSpan.asleep == false ? TrackerConstants.scaleLevel6Color : TrackerConstants.scaleLevel2Color)
                                //.foregroundColor(.red)
                                                 
                    }
                 
                }
            }
            
            
            })     // end of overlay
      
    }
}

解决方法

在您的问题中，您说您已经仔细检查了总数 = 100。但是，如果您像使用百分比一样使用它，您会希望它是 1.0，而不是 100（这样所有的加起来都是 1.0 * width）。

其次，HStack 具有内置的默认间距。尝试使用 HStack(spacing: 0)