Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SwiftUI Pass Value from Geometry Reader to Function

Tags:

swift

swiftui

I have a view which uses Geometry Reader to calculate how large the image area should be:

GeometryReader { metrics in
    ZStack{
        self.image
           .resizable()
           .frame(width:  (metrics.size.height - 10) * 0.561403509 , height: metrics.size.height - 10, alignment: .top)
           .clipped()
    }
}

But I have a function where I want to use the frame height and width calculated by the GeometryReader in order to crop the image.

I have a separate function which crops the image when a button is pressed:

 DownloadImageButton(prepareImagefunction: { self.prepareImage() })

Which then calls a prepareImage function:

func prepareImage( ) {
 // In order for image cropping to work, we need the equivalent of view.bounds in order to adjust the crop so that it correctly measures the crop area. We need metrics.width and metrics.height 
 var adjustmentScaleForDisplaySize = targetSize.width / metrics.width

Note that the GeometryReader is a child of the parent view where prepareImage is called. Therefore, ideally, the child would save the metrics values in an EnvironmentObject or Binding to the parent.

like image 383
dot3 Avatar asked Mar 03 '20 20:03

dot3


People also ask

How to use geometryreader in SwiftUI?

The second tip is to use GeometryReader inside an overlay or background of any view. SwiftUI keeps overlay and background views in the same size as the view that you apply them. It limits the size of GeometryReader and doesn’t allow it to grow and fill all the available space.

What is <container geometry> in SwiftUI?

In the implementation above, <container geometry> is an instance of GeometryProxy. GeometryProxy simply encapsulates the container's frame and safe area insets, provided at runtime by SwiftUI. In this example, GeometryReader is used to create a view scaled down to exactly half of its parent container:

Where does the content of a SwiftUI view go?

Usually, SwiftUI views place content in the center of its coordinate space. As you can see, GeometryReader ’s @ ViewBuilder closure has the parameter called geometry. This parameter is an instance of GeometryProxy struct.

What is the geometryreader view?

GeometryReader is a view that gives you access to the size and position of it's parent. For example:


2 Answers

Is there a way to pass the value calculated by GeometryReader to a function?

Yes, you can do this. The var metrics is a GeometryProxy, so function signature should be like in the following example

private func resizedImage(for metrics: GeometryProxy) -> some View {
    self.image
       .resizable()
       .frame(width:  (metrics.size.height - 10) * 0.561403509 , height: metrics.size.height - 10, alignment: .top)
       .clipped()
}

so your usage

GeometryReader { metrics in
    ZStack{
       self.resizedImage(for: metrics)
    }
}

Update: for changed request

Assuming you have in child view binding as

@Binding var cropSize: CGSize

the above function can be modified as follow

private func resizedImage(for metrics: GeometryProxy) -> some View {
    let size = CGSize(width: (metrics.size.height - 10) * 0.561403509, 
                           height: metrics.size.height - 10)
    self.cropSize = size
    return self.image
       .resizable()
       .frame(width: size.width, height: size.height, alignment: .top)
       .clipped()
}
like image 177
Asperi Avatar answered Nov 08 '22 20:11

Asperi


Since I actually ONLY needed the crop size, and didn't necessarily need an image returned, I did the following which also helped to avoid throwing an error which can occur in the accepted answer:

[SwiftUI] Modifying state during view update, this will cause undefined behavior.

I added an .onAppear function call which helps to avoid the above error, and then properly passes the crop dimension to the parent:

GeometryReader { metrics in
  ZStack{
   self.image
   .resizable()
   .frame(width:  (metrics.size.height - 10) * 0.561403509 , height: metrics.size.height - 10, alignment: .top)
   .clipped()
  }.onAppear{
    self.saveCropSize(for: metrics)
  }....

private func saveCropSize(for metrics: GeometryProxy){
    let size = CGSize(width: (metrics.size.height - 10) * 0.561403509, 
                           height: metrics.size.height - 10)
    self.cropSize = size
}
like image 40
dot3 Avatar answered Nov 08 '22 18:11

dot3