Sobes.tech
Middle+

Čo je matchedGeometryEffect a ako sa používa v SwiftUI?

sobes.tech AI

Odpoveď od AI

matchedGeometryEffect v SwiftUI sa používa na vytvorenie plynulého prechodu medzi dvoma pohľadmi, ktoré predstavujú ten istý vizuálny prvok v rôznych rozloženiach. Spája geometriu pohľadu v jednom stave s geometriou iného pohľadu v inom stave, čo umožňuje SwiftUI automaticky animovať zmeny.

Používa sa aplikovaním modifikátora .matchedGeometryEffect na oba pohľady, ktoré majú byť prepojené. Modifikátor prijíma tri parametre:

  1. id: Unikátne identifikátor na prepojenie pohľadov.
  2. in: Priestor mien (Namespace), v ktorom je identifikátor zaregistrovaný. Zvyčajne sa vytvára pomocou @Namespace.
  3. properties: Súbor geometrických vlastností, ktoré majú byť animované (napríklad, .position, .size, .frame).

Príklad použitia:

struct ContentView: View {
    @Namespace private var animation
    @State private var isExpanded = false

    var body: some View {
        VStack {
            if isExpanded {
                Rectangle()
                    .fill(Color.blue)
                    .matchedGeometryEffect(id: "myShape", in: animation)
                    .frame(width: 200, height: 200)
                    .onTapGesture {
                        withAnimation {
                            isExpanded.toggle()
                        }
                    }
            } else {
                Rectangle()
                    .fill(Color.red)
                    .matchedGeometryEffect(id: "myShape", in: animation)
                    .frame(width: 50, height: 50)
                    .onTapGesture {
                        withAnimation {
                            isExpanded.toggle()
                        }
                    }
            }
        }
    }
}

V tomto príklade matchedGeometryEffect spája dva Rectangle s rovnakým id ("myShape") a v rovnakom priestore mien (animation). Keď sa isExpanded zmení, SwiftUI automaticky animuje prechod medzi dvoma stavmi, čím vytvára plynulý efekt zmeny veľkosti a polohy obdĺžnika.