SwiftUI Academy · Lektion

Brugerdefinerede alignment guides

Justér views præcist på tværs af hierarkiet.

Lektion 2 af 413 trin

Brugerdefinerede alignment guides er en gratis SwiftUI Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i SwiftUI Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. SwiftUI Academy-kurset indeholder 4 lektioner i alt.

Justering af elementer

Stacks justerer underordnede visninger ved hjælp af en fælles kant eller et fælles centrum. Justeringslinjer lader dig finindstille præcis, hvor den linje skal ligge. 📏

Indbyggede justeringer

En HStack tager en lodret justering som .top eller .center, mens en VStack tager en vandret.

HStack(alignment: .top) {
    Text("A")
    Text("Big")
}

Modifikatoren alignmentGuide

Modifikatoren alignmentGuide tilsidesætter, hvor en enkelt visning eksponerer en bestemt justering for sin overordnede visning.

Text("Hi")
    .alignmentGuide(.top) { d in d[.bottom] }

Læsning af dimensioner

Closure-funktionen modtager en værdi af typen ViewDimensions, så du kan læse d.width, d.height eller en navngiven justeringslinje.

Text("Hi").alignmentGuide(.leading) { d in
    d.width / 2
}

Flyt justeringslinjen

Hvis du returnerer et andet tal, flyttes visningen i forhold til de andre, fordi den overordnede visning placerer alle efter den returnerede værdi.

Brugerdefineret justerings-id

Hvis det skal kunne genbruges, skal du definere en type, der overholder AlignmentID, med en defaultValue til tilfælde uden justering.

struct MidBadge: AlignmentID {
    static func defaultValue(in d: ViewDimensions) -> CGFloat {
        d[.bottom]
    }
}

Navngiv den under Alignment

Udvid VerticalAlignment eller HorizontalAlignment med en statisk egenskab, der er knyttet til dit AlignmentID.

extension VerticalAlignment {
    static let midBadge = VerticalAlignment(MidBadge.self)
}

Brug den brugerdefinerede linje

Send din navngivne justering til en stack, og markér derefter de visninger, der skal fastgøres til den brugerdefinerede linje.

HStack(alignment: .midBadge) {
    Avatar()
    Label()
}

Markér deltagerne

Hver visning, der skal dele linjen, angiver alignmentGuide for din brugerdefinerede justering til det punkt, den vil matche.

Label()
    .alignmentGuide(.midBadge) { d in
        d[VerticalAlignment.center]
    }

Styrke på tværs af hierarkiet

Brugerdefinerede justeringslinjer er særligt nyttige, når visninger ligger i forskellige containere, men stadig skal justeres, f.eks. en billedtekst efter centrum af et ikon på tværs af kolonner. ✨

Vær opmærksom på standarden

Enhver visning, der ikke angiver din brugerdefinerede justeringslinje, falder tilbage til sin defaultValue, så vælg standarden med omtanke.

Hurtigt tjek

Husk, hvad alignmentGuide-closure-funktionen modtager.

Opsummering

Du kan nu tilsidesætte justering med alignmentGuide og definere brugerdefinerede AlignmentID-typer for at justere visninger på tværs af hierarkiet. 🎉

Gratis at komme i gang

Lær Swift med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
30
Lektioner
120

Ofte stillede spørgsmål

Er lektionen “Brugerdefinerede alignment guides” gratis?

Ja — hele teksten til “Brugerdefinerede alignment guides” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af SwiftUI Academy-kurset, skal du opgradere til CoddyKit PRO. SwiftUI Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Brugerdefinerede alignment guides”?

Justér views præcist på tværs af hierarkiet. Du øver dig i SwiftUI Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på SwiftUI Academy?

Der kræves ingen tidligere erfaring. SwiftUI Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Brugerdefinerede alignment guides”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne SwiftUI Academy-lektion?

Ja. Alle SwiftUI Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Det grundlæggende i GeometryReader
  2. Brugerdefinerede alignment guides
  3. Layout-protokollen
  4. Opbygning af et flow-layout
← Tilbage til SwiftUI Academy