Πώς να προσθέσετε κείμενο σε σχήματα στο SwiftUI

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

Συνδυάστε κείμενο και σχήματα

Ας ξεκινήσουμε βάζοντας κείμενο σε ένα απλό σχήμα. SwiftUI ZStack είναι ιδανικό για τοποθέτηση όψεων το ένα πάνω στο άλλο.

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Circle()
                .fill(Color.blue)
                .frame(width: 150, height: 150)
            Text("Hello, World!")
                .foregroundColor(.white)
        }
    }
}

Εδώ, ένας μπλε κύκλος χρησιμεύει ως φόντο για το λευκό “Hello, World!” κείμενο. ο ZStack διασφαλίζει ότι το κείμενο είναι τοποθετημένο ακριβώς πάνω από το κέντρο του κύκλου.

Προσαρμόστε το στυλ κειμένου

Για να κάνετε το κείμενο πιο ευανάγνωστο και οπτικά ελκυστικό, μπορείτε να εφαρμόσετε διάφορα στυλ σε αυτό.

ZStack {
    RoundedRectangle(cornerRadius: 10)
        .fill(Color.green)
        .frame(width: 200, height: 100)
    Text("Hello")
        .font(.title)
        .bold()
        .foregroundColor(.white)
}

Στον παραπάνω κώδικα, το κείμενο “Hello” έχει στυλ με γραμματοσειρά τίτλου και έντονη βαρύτητα, που ξεχωρίζει καθαρά στο πράσινο στρογγυλεμένο ορθογώνιο φόντο.

Στοίχιση κειμένου μέσα σε σχήματα

Ίσως θέλετε να στοιχίσετε το κείμενό σας διαφορετικά ανάλογα με το σχέδιο. Το SwiftUI σάς δίνει τον έλεγχο να κάνετε ακριβώς αυτό.

ZStack(alignment: .bottomTrailing) {
    Capsule()
        .fill(Color.orange)
        .frame(width: 200, height: 100)
    Text("Bottom Right")
        .padding()
        .foregroundColor(.white)
}

Με ZStack η ευθυγράμμιση ορίστηκε σε .bottomTrailingτο κείμενο “Κάτω δεξιά” βρίσκεται στην κάτω δεξιά γωνία του πορτοκαλί σχήματος κάψουλας.

Ενσωμάτωση κειμένου μέσα σε σχήματα

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

Text("Embedded")
    .padding()
    .background(Capsule().stroke(Color.blue, lineWidth: 4))

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

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

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

Η ανάρτηση Πώς να προσθέσετε κείμενο σε σχήματα στο SwiftUI εμφανίστηκε πρώτα στην Κωδικοποίηση με τον Rashid.