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

问题描述

我正在尝试使用 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)
                    }
                }
            }
        }
    }

解决方法

试试下面的方法

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
}