在不修改视图的情况下使用 GeometryReader

Posted 2023-02-24

【中文标题】在不修改视图的情况下使用 GeometryReader

【英文标题】：Using GeometryReader without modifying the view

【发布时间】：2021-04-05 02:43:44

【问题描述】：

我正在尝试使用GeometryReader 在这里根据可用大小构建视图，但是由于此视图嵌入在带有填充的父视图中，因此无法正确绘制。我从other SO answers 知道，有人说将GeometryReader 用作.overlay 或.background，但我无法在这里找到一种方法：

 var body: some View 
        GeometryReader  geometry in
            HStack(alignment: .bottom, spacing: 5) 
                ForEach(dataStore.sleepOrAwakeSpans)  sleepOrAwakeSpan in
                    VStack 
                        RoundedRectangle(cornerRadius: 5.0)
                            .frame(width: geometry.size.width * CGFloat((sleepOrAwakeSpan.endTime.timeIntervalSince(sleepOrAwakeSpan.startTime) / athlyticDataStore.sleepOrAwakeSpans.map  $0.endTime.timeIntervalSince($0.startTime) .reduce(0, +))), height: 25)
                            .foregroundColor(sleepOrAwakeSpan.asleep == false ? TrackerConstants.scaleLevel6Color : TrackerConstants.scaleLevel2Color)
                    
                
            
        
    

【问题讨论】：

这取决于你想在这里做什么。大多数人建议使用 GeometryReader 作为覆盖/背景视图，因为它会使用父视图中可用的大小。当 GeometryReader 像上面那样使用时，它会尝试用尽视图中的所有可用空间，在这些空间中它会填充它的子视图。

您的代码无法编译

【参考方案1】：

试试下面的

var body: some View 
    Color.clear.overlay(     // << consumes available space of parent
        GeometryReader  geometry in
            HStack(alignment: .bottom, spacing: 5) 
                ForEach(dataStore.sleepOrAwakeSpans)  sleepOrAwakeSpan in
                    VStack 
                        RoundedRectangle(cornerRadius: 5.0)
                            .frame(width: geometry.size.width * CGFloat((sleepOrAwakeSpan.endTime.timeIntervalSince(sleepOrAwakeSpan.startTime) / athlyticDataStore.sleepOrAwakeSpans.map  $0.endTime.timeIntervalSince($0.startTime) .reduce(0, +))), height: 25)
                            .foregroundColor(sleepOrAwakeSpan.asleep == false ? TrackerConstants.scaleLevel6Color : TrackerConstants.scaleLevel2Color)
                    
                
            
        )     // end of overlay

【讨论】：

谢谢，只要 HStack 间距为 0，它就可以工作，但是当我尝试在每个 RoundedRectangle 之间添加更多空间（例如在我的示例中为 5）时，它几乎一直流离屏幕。我该如何解释间距？ ?