Πώς να προσθέσετε σχήματα SwiftUI με γεμίσματα διαβάθμισης

2
Πώς να προσθέσετε σχήματα SwiftUI με γεμίσματα διαβάθμισης

Στον κόσμο του SwiftUI, τα σχήματα είναι θεμελιώδη στοιχεία διεπαφής χρήστη που μπορούν να ζωντανέψουν με χρώματα και διαβαθμίσεις. Οι διαβαθμίσεις είναι ιδιαίτερα ισχυρές, προσφέροντας μια ζωντανή εμφάνιση που μπορεί να κάνει τα σχήματά σας να ξεχωρίζουν ή να συνδυάζονται όμορφα στο φόντο.

Αυτή η ανάρτηση ιστολογίου θα σας καθοδηγήσει στη συμπλήρωση σχημάτων με διαβαθμίσεις στο SwiftUI.

Το SwiftUI παρέχει τρεις τύπους κλίσεων: γραμμικές, ακτινικές και γωνιακές, καθένας με τη μοναδική του γοητεία. Αυτές οι διαβαθμίσεις μπορούν να εφαρμοστούν σε οποιαδήποτε Shape μέσα από .fill τροποποιητής. Ας εξερευνήσουμε πώς να χρησιμοποιήσουμε αυτές τις διαβαθμίσεις για να γεμίσουμε σχήματα.

Συμπληρώστε σχήματα με LinearGradient

ΕΝΑ LinearGradient δημιουργεί μια χρωματική μετάβαση σε μια ευθεία γραμμή. Για να γεμίσετε ένα σχήμα με γραμμική διαβάθμιση, πρέπει πρώτα να ορίσετε τη διαβάθμιση και μετά να χρησιμοποιήσετε το .fill τροποποιητής στο σχήμα.

Δείτε πώς μπορείτε να γεμίσετε ένα ορθογώνιο με γραμμική κλίση:

import SwiftUI

struct ContentView: View {
    var body: some View {
        Rectangle()
            .fill(LinearGradient(gradient: Gradient(colors: [Color.red, Color.orange]), startPoint: .top, endPoint: .bottom))
            .frame(width: 200, height: 100)
    }
}

Σε αυτό το απόσπασμα, LinearGradient εφαρμόζεται στο Rectangle σχήμα, μεταβατικό από κόκκινο στο πάνω μέρος σε πορτοκαλί στο κάτω μέρος.

γέμισμα κλίσης σχήματος swiftui

Συμπληρώστε σχήματα με RadialGradient

ΕΝΑ RadialGradient μεταφέρει τα χρώματα από ένα κεντρικό σημείο προς τα έξω. Είναι ιδανικό για τη δημιουργία εφέ προβολέα ή την προσομοίωση βάθους.

Για να γεμίσετε έναν κύκλο με ακτινική κλίση:

Circle()
    .fill(RadialGradient(gradient: Gradient(colors: [Color.blue, Color.green]), center: .center, startRadius: 0, endRadius: 100))
    .frame(width: 200, height: 200)

ο Circle εδώ ακτινοβολεί από το μπλε στο κέντρο του έως το πράσινο στις άκρες.

ακτινική κλίση σχήματος swiftui

Συμπληρώστε σχήματα με AngularGradient

Ενα AngularGradient (γνωστό και ως κωνική κλίση) χρωματίζει ένα σχήμα γύρω από ένα κεντρικό σημείο, όπως τα χρώματα σε ένα βελάκι.

Ακολουθεί ένα παράδειγμα με μια γωνιακή κλίση σε έναν κύκλο:

Circle()
    .fill(AngularGradient(gradient: Gradient(colors: [Color.purple, Color.pink]), center: .center))
    .frame(width: 200, height: 200)

Σε αυτόν τον κώδικα, τα χρώματα ντεγκραντέ σαρώνουν γύρω από το κέντρο του κύκλου, δημιουργώντας ένα μωβ έως ροζ δακτύλιο.

Προσαρμογή γεμισμάτων κλίσης

Μπορείτε να προσαρμόσετε περαιτέρω τις διαβαθμίσεις προσθέτοντας περισσότερα χρώματα και ελέγχοντας τις θέσεις αυτών των χρωμάτων εντός της διαβάθμισης.

Rectangle()
    .fill(LinearGradient(
        gradient: Gradient(colors: [Color.red, Color.yellow, Color.green]),
        startPoint: .leading,
        endPoint: .trailing))
    .frame(width: 300, height: 150)

Αυτό Rectangle έχει μια πολύχρωμη διαβάθμιση που εκτείνεται από αριστερά προς τα δεξιά.

Οι διαβαθμίσεις μπορούν να βελτιώσουν δραματικά την οπτική ελκυστικότητα των σχημάτων σας στο SwiftUI. Είτε επιλέγετε ανεπαίσθητες χρωματικές μεταβάσεις είτε έντονες, ζωντανές σαρώσεις, οι διαβαθμίσεις παρέχουν ένα σύνολο εργαλείων για να κάνετε τη διεπαφή χρήστη σας εκφραστική και ελκυστική.

Η κατανόηση του τρόπου εφαρμογής και χειρισμού των διαβαθμίσεων θα σας επιτρέψει να δημιουργήσετε σχέδια που είναι ταυτόχρονα όμορφα και λειτουργικά, διασφαλίζοντας ότι η εφαρμογή σας ξεχωρίζει με τον καλύτερο δυνατό τρόπο.

Bir cevap yazın