SwiftUI 在 ForEach 中使用几何 Reader

Question

我不明白为什么我的 ForEach 循环使我的视图无法在其父视图内正确缩放。如果我注释掉 ForEach 循环并取消注释 //.frame(width: geometry.size.width, height: 10)，则 RoundedRectangle 在其父视图中正确缩放，但是当使用 ForEach 循环时，我的视图会流出屏幕。我仔细检查了 CGFloat((sleepOrAwakeSpan.seconds / DataStore.sleepOrAwakeSpans.map { [=13=].endTime.timeIntervalSince([=13=].startTime) }.reduce(0, +))) 总计 = 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 { [=11=].endTime.timeIntervalSince([=11=].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
      
    }
}

Answer 1

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

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

SwiftUI 在 ForEach 中使用几何 Reader

SwiftUI Using Geometry Reader with ForEach

ios

swiftui

geometryreader

swiftui-foreach