在不修改視圖的情況下使用 GeometryReader

Question

我在這里嘗試使用GeometryReader根據可用大小構建視圖，但是由於此視圖嵌入在帶有填充的父視圖中，因此無法正確繪制。 我從其他 SO 答案中知道，有人說將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)
                    }
                }
            }
        }
    }

Answer 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
}