Πώς να δημιουργήσετε στρογγυλεμένο ορθογώνιο στο SwiftUI

1
Πώς να δημιουργήσετε στρογγυλεμένο ορθογώνιο στο SwiftUI

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

Τα βασικά ενός στρογγυλεμένου ορθογωνίου

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

import SwiftUI

struct ContentView: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 10)
            .fill(Color.blue)
            .frame(width: 200, height: 100)
    }
}

Σε αυτό το απόσπασμα κώδικα, δημιουργούμε ένα απλό στρογγυλεμένο ορθογώνιο με ακτίνα γωνίας 10 σημείων. ο fill ο τροποποιητής χρησιμοποιείται για να χρωματίσει το σχήμα μπλε και το frame ο τροποποιητής ορίζει το μέγεθός του.

swiftui στρογγυλεμένο ορθογώνιο

Προσαρμόστε την ακτίνα γωνίας

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

RoundedRectangle(cornerRadius: 25, style: .continuous)
    .fill(Color.green)
    .frame(width: 200, height: 100)

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

swiftui στρογγυλεμένο ορθογώνιο σχήμα

Στρογγυλεμένο ορθογώνιο με περίγραμμα

Για να προσθέσετε ένα περίγραμμα σε ένα στρογγυλεμένο ορθογώνιο, χρησιμοποιήστε το stroke ή strokeBorder τροποποιητής.

RoundedRectangle(cornerRadius: 15)
    .stroke(Color.red, lineWidth: 3)
    .frame(width: 200, height: 100)

Εδώ, το stroke Ο τροποποιητής προσθέτει ένα κόκκινο περίγραμμα 3 σημείων στο σχήμα. Εάν θέλετε το περίγραμμα να είναι σχεδιασμένο μέσα στα όρια του σχήματος, αντικαταστήστε το stroke με strokeBorder.

Σκιά και Υψόμετρο

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

RoundedRectangle(cornerRadius: 20)
    .fill(Color.blue)
    .shadow(color: .gray, radius: 10, x: 0, y: 10)
    .frame(width: 300, height: 150)

Σε αυτό το παράδειγμα, μια γκρίζα σκιά με ακτίνα 10 σημείων προστίθεται κάτω από το μπλε στρογγυλεμένο ορθογώνιο, δίνοντας την ψευδαίσθηση της ανύψωσης.

swiftui στρογγυλεμένο ορθογώνιο με σκιές

Προβολές κλιπ

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

import SwiftUI

struct ContentView: View {
    var body: some View {
            Image("dog")
                .frame(width: 350, height: 400)
                .clipShape(RoundedRectangle(cornerRadius: 25))
    }
}

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

swiftui εικόνα κλιπ στρογγυλεμένο ορθογώνιο

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

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

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

Bir cevap yazın