I am trying to use GeometryReader
here to build views based on the size available, however because this view is embedded in a parent view with padding, it is not drawing correctly. I know from other SO answers, some have said to use the GeometryReader
as an .overlay
or .background
but I can’t figure out a way to do that here:
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)
}
}
}
}
}
Try the following
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
}