Sobes.tech
Middle+

Mis on matchedGeometryEffect ja kuidas seda SwiftUI-s kasutatakse?

sobes.tech AI

Vastus AI-lt

matchedGeometryEffect SwiftUI-s kasutatakse sujuva ülemineku loomiseks kahe vaate vahel, mis esindavad sama visuaalset elementi erinevates paigutustes. See ühendab ühe oleku vaate geomeetria teise oleku vaate geomeetriaga, võimaldades SwiftUI-l automaatselt animatsioonide kaudu muudatusi teha.

Kasutatakse, rakendades mõlemale vaatele .matchedGeometryEffect modifikaatorit, mis peavad olema seotud. Modifikaator võtab kolm parameetrit:

  1. id: Unikaalne identifikaator seotud vaadete jaoks.
  2. in: Nimekspace (Namespace), kus identifikaator on registreeritud. Tavaliselt luuakse see @Namespace abil.
  3. properties: Geomeetrilised omadused, mida tuleb animatsiooniga muuta (näiteks .position, .size, .frame).

Kasutusnäide:

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()
                        }
                    }
            }
        }
    }
}

Selles näites ühendab .matchedGeometryEffect kaks Rectangle-i sama id-ga ("myShape") ja samas nimekspaces (animation). Kui isExpanded muutub, animatsioon automaatselt sujuvalt vahetab kahe oleku vahel, luues sujuva suuruse ja asukoha muutuse efekti.