SwiftUI 将几何阅读器与 ForEach 结合使用

Posted 2023-03-11

【中文标题】SwiftUI 将几何阅读器与 ForEach 结合使用

【英文标题】：SwiftUI Using Geometry Reader with ForEach

【发布时间】：2021-04-05 19:27:55

【问题描述】：

我无法弄清楚为什么我的 ForEach 循环使我的视图无法在其父视图内正确缩放。如果我注释掉 ForEach 循环并取消注释 //.frame(width: geometry.size.width, height: 10)，RoundedRectangle 会在其父视图中正确缩放，但是当使用 ForEach 循环时，我的视图会流出屏幕。我已经仔细检查了CGFloat((sleepOrAwakeSpan.seconds / DataStore.sleepOrAwakeSpans.map $0.endTime.timeIntervalSince($0.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  $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
      
    

【参考方案1】：

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

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

【讨论】：

谢谢！是的，对不起，我的意思是 100%，即 1.0，是的 HStack(spacing: 0) 确实可以在它的父级中居中而不重叠，但是我希望视图之间有更多的空间，我该如何添加说 2 或 5 个间距?

如果你想要间距，你必须将它构建到你的方程中——所以宽度就是(totalWidth - totaSpacing) * percentage。您可以通过将单个间距乘以视图数 - 1 来找到总间距。