[SUI] ScrollViewReader

ScrollViewReader permite controlar un ScrollView o un List por medio de un proxy de tipo ScrollViewProxy que tiene la información requerida para desplazar el conjunto de subvistas a una fila específica.

• init(content:)
• scrollTo(_:anchor:): Mueve la lista de vistas a la vista identificada por id. anchor, de tipo UnitPoint, define los puntos del ScrollView y la vista identificada que deben ser alineados. Por ejemplo, si anchor es top alinea el top de la vista identificada con el top del ScrollView. Si anchor es nil, entonces se encuentra el contenedor de la vista identificada y se hace el mínimo scroll necesario para hacer que la vista identificada sea visible por completo.

Para desplazar el contenido usando un ScrollViewReader, se envuelve la vista con él y se usa el ScrollViewProxy para llamar scrollTo() con el identificador de la fila a la que se va a apuntar.

struct ContentView: View {
  let data: [Content] = [
    .init(text: "1"),
    // ...
    .init(text: "16"),
  ]
  @State var selected: Content? = nil
  var body: some View {
    VStack {
      ScrollViewReader { proxy in
        Spacer()

        ScrollView(.horizontal) {
          LazyHStack {
            ForEach(data) { i in
              Text("Item: [\(i.text)]")
                .background(i.id == selected?.id ? .gray : .clear)
                .containerRelativeFrame(.horizontal, count: 8, span: 1, spacing: 0, alignment: .center)
                .scrollTransition(.interactive, axis: .horizontal) { effect, phase in
                  effect
                    .opacity(phase.isIdentity ? 1: 0)
                    .scaleEffect(phase.isIdentity ? 1 : 0.5)
                }
            }
          }
          .scrollTargetLayout()
          // ⚠️ Esto es necesario para alinear las vistas con viewAligned
        }
        .frame(height: 100)
        // ⚠️ Notar que las vistas están alineadas.
        .scrollTargetBehavior(.viewAligned)

        Button {
          // ⚠️ Salto hacia el centro del dataset
          selected = data[data.count / 2]
          proxy.scrollTo(selected!.id, anchor: .center)
        } label: {
          Text("Centrar")
        }

        Spacer()
      }
    }
  }
}