[SUI] GeometryReader

#swiftui #swift #ios

GeometryReader define su contenido como una función del tamaño que tiene disponible. Este recibe un objeto GeometryProxy que tiene un método frame(in:) y unas propiedades size y safeAreaInset que informan del tamaño del contenedor.

Es posible que necesite saber la posición del GeometryReader con respecto a otro contenedor externo, para lo que se usa frame(in:). Este modificador recibe como argumento global, local o named(_:).

global representa las coordenadas de la pantalla.
local representa las coordenadas de la vista.
named(_:) permite relacionar el GeometryReader con un contenedor específico, al aplicar coordinateSpace(_:) sobre contenedor de interés.

Para calcular el tamaño de alguna vista específica, se puede aplicar GeometryReader como vista secundaria por medio de background(alignment:content:) y dentro pintar un fondo translúcido con Color.clear.

struct ContentView: View {
  private var title = "Este es un texto largo. Vamos a caracterizarlo."
  @State private var textSize: CGSize = .zero
  @State private var positionInContainer: CGPoint = .zero

  var body: some View {
    VStack(spacing: 10) {
      Text(title)
        .font(.title)
        .multilineTextAlignment(.center)
        .background(
          GeometryReader(content: { proxy in
            Color.clear
              .onAppear {
                textSize = proxy.size
                positionInContainer = CGPoint(x: proxy.frame(in: .named("container")).origin.x, y: proxy.frame(in: .named("container")).origin.y)
              }
          })
        )
        .border(.blue.opacity(0.3))
        .padding(.top, 20)
        .padding(.leading, 200)
        .border(.gray)
      Text("Dimensiones: \(textSize.width)x\(textSize.height)")
      Text("Posición dentro del stack: (\(positionInContainer.x), \(positionInContainer.y))")
    }
    .border(.red.opacity(0.3))
    .coordinateSpace(.named("container"))
  }
}