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

【问题标题】：SwiftUI Using Geometry Reader with ForEachSwiftUI 将几何阅读器与 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
      
    }
}

【问题讨论】：

标签： ios swiftui geometryreader swiftui-foreach

【解决方案1】：

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

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

【讨论】：

谢谢！是的，对不起，我的意思是 100%，即 1.0，是的 HStack(spacing: 0) 确实可以在它的父级中居中而不重叠，但是我希望视图之间有更多的空间，我该如何添加说 2 或 5 个间距?
如果你想要间距，你必须将它构建到你的方程中——所以宽度就是(totalWidth - totaSpacing) * percentage。您可以通过将单个间距乘以视图数 - 1 来找到总间距。