1

The below code works great, however the geometry reading is causing me issues upstream, so I would like to have the same logic to build the view's width based on available space but without using Geometry Reader. Is it possible?

    var body: some View {
            
            ZStack {
                GeometryReader { geometry in
                    ZStack(alignment: .leading) {
                        RoundedRectangle(cornerRadius: 12.0)
                            .fill(Color(.lightGray))
                            .opacity(0.1)
                            .frame(height: 20)
                        RoundedRectangle(cornerRadius: 12.0)
                            .fill(getColorForBar(progress: progress))
                            .frame(width: getFillWidth(progress: progress, geometry: geometry), height: 20)
                            .animation(self.progressAnimation)
                    }
                }
            }
        }

 private func getFillWidth(progress: Double, geometry: GeometryProxy) -> CGFloat {
        var offset: CGFloat = geometry.size.width * CGFloat(progress)
        
        if progress == 0 {
            offset = (geometry.size.width * CGFloat(progress)) + 10.0
        } else if progress == 1.0 {
            offset = (geometry.size.width * CGFloat(progress)) - 10.0
        }
        return offset
        
    }
GarySabo
  • 4,076
  • 5
  • 27
  • 76

1 Answers1

1

The GeometryReader is exact instrument to read views geometry, actually. You just need to use it in different way (so not affect external layout).

Here is a solution that do not break layout. Tested with Xcode 12.1 / iOS 14.1

RoundedRectangle(cornerRadius: 12.0) // << this consumes available width only
    .fill(Color(.lightGray))
    .opacity(0.1)
    .frame(height: 20)
    .overlay(GeometryReader { geometry in   // << this reads parent rectangle area
        RoundedRectangle(cornerRadius: 12.0)
            .fill(getColorForBar(progress: progress))
            .frame(width: getFillWidth(progress: progress, geometry: geometry), height: 20)
            .animation(self.progressAnimation)
        }, alignment: .leading)
Asperi
  • 123,447
  • 8
  • 131
  • 245