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

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

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

Βασικά σύνορα με εγκεφαλικό

Ας ξεκινήσουμε με τα βασικά της προσθήκης περιγράμματος σε ένα σχήμα χρησιμοποιώντας τον τροποποιητή stroke.

Circle()
    .stroke(Color.blue, lineWidth: 5)
    .frame(width: 100, height: 100)

Σε αυτό το παράδειγμα, α Circle δημιουργείται με περίγραμμα πάχους 5 πόντων και χρώματος μπλε. ο stroke Ο τροποποιητής είναι τέλειος για απλά περιγράμματα, εφαρμόζοντας το καθορισμένο χρώμα και πάχος στην άκρη του σχήματος.

περίγραμμα σχήματος swiftui

Προηγμένα σύνορα με StrokeBorder

Το SwiftUI προσφέρει επίσης το strokeBorder τροποποιητής, ο οποίος έχει σχεδιαστεί για να προσθέτει μια διαδρομή μέσα στο σχήμα, διατηρώντας τις αρχικές διαστάσεις του σχήματος.

Circle()
    .strokeBorder(Color.green, lineWidth: 10)
    .frame(width: 100, height: 100)

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

περίγραμμα περιγράμματος σε σχήμα swiftui

Διακεκομμένα σύνορα

Για πιο διακοσμητικό περίγραμμα, μπορείτε να προσθέσετε ένα μοτίβο παύλας στο μοτίβο.

RoundedRectangle(cornerRadius: 20)
    .stroke(Color.red, style: StrokeStyle(lineWidth: 5, dash: [10]))
    .frame(width: 150, height: 100)

Αυτό το απόσπασμα κώδικα εφαρμόζει ένα διακεκομμένο περίγραμμα στο a RoundedRectangle. ο StrokeStyle προσαρμόζεται με έναν πίνακα παύλων που καθορίζει το μοτίβο των παύλων.

σχήμα swiftui διακεκομμένο περίγραμμα

Σύνθετα σύνορα

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

Rectangle()
    .stroke(Color.yellow, lineWidth: 10)
    .frame(width: 150, height: 100)
    .overlay(
        Rectangle()
            .stroke(Color.orange, lineWidth: 5)
            .padding(6)
    )
    .overlay(
        Rectangle()
            .stroke(Color.red, lineWidth: 5)
            .padding(12)
    )

Εδώ, έχουμε ένα Rectangle με τρία σύνορα. Με τη χρήση overlay συνδυασμένο με paddingδημιουργούμε ένα πολυεπίπεδο εφέ περιγράμματος, το καθένα με διαφορετικό χρώμα και πλάτος.

swiftui σχήμα πολλαπλών περιθωρίων

Κλίση περιγράμματος

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

Ellipse()
    .strokeBorder(LinearGradient(gradient: Gradient(colors: [.purple, .pink]), startPoint: .top, endPoint: .bottom), lineWidth: 10)
    .frame(width: 200, height: 100)

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

περίγραμμα κλίσης σχήματος swiftui

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

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

Bir cevap yazın