Στο SwiftUI, η κατανόηση του τρόπου ελέγχου του μεγέθους των σχημάτων είναι σημαντική για το σχεδιασμό μιας προσαρμόσιμης και οπτικά ελκυστικής διεπαφής. Σε αυτήν την ανάρτηση ιστολογίου, θα σας μεταφέρω στα βασικά στοιχεία του μεγέθους του σχήματος στο SwiftUI.
Όσον αφορά το μέγεθος των σχημάτων στο SwiftUI, δεν είναι μόνο ο ορισμός του πλάτους και του ύψους. Έχει να κάνει με την κατανόηση του τρόπου με τον οποίο τα σχήματα αλληλεπιδρούν με τον χώρο γύρω τους και πώς μπορούν να κατασκευαστούν ώστε να ταιριάζουν σε διαφορετικά μεγέθη οθόνης και προσανατολισμούς.
Χρησιμοποιήστε το πλαίσιο για σταθερά μεγέθη
Ο πιο άμεσος τρόπος για το μέγεθος ενός σχήματος στο SwiftUI είναι χρησιμοποιώντας το frame τροποποιητή, ο οποίος σας επιτρέπει να καθορίσετε ένα ακριβές πλάτος και ύψος.
Circle()
.frame(width: 100, height: 100)Εδώ, έχουμε ένα Circle με σταθερό μέγεθος 100×100 πόντων. Αυτή η μέθοδος είναι απλή, αλλά δεν ανταποκρίνεται στο μέγεθος της γονικής προβολής ή στις αλλαγές της οθόνης της συσκευής.
Ευέλικτο μέγεθος με το GeometryReader
Για πιο δυναμικά και αποκριτικά σχέδια, μπορείτε να διαστασιολογήσετε τα σχήματά σας σε σχέση με το μητρικό κοντέινερ χρησιμοποιώντας GeometryReader.
GeometryReader { geometry in
Rectangle()
.frame(width: geometry.size.width / 2, height: geometry.size.height / 2)
}ο Rectangle Σε αυτό το παράδειγμα θα είναι πάντα το μισό πλάτος και το μισό ύψος της γονικής προβολής, χάρη στον διακομιστή μεσολάβησης γεωμετρίας που παρέχει το μέγεθος της γονικής προβολής.
Θεωρήσεις αναλογίας διαστάσεων
Η διατήρηση της αναλογίας διαστάσεων ενός σχήματος είναι απαραίτητη, ειδικά όταν εργάζεστε με προσαρμοσμένα σχέδια.
Circle()
.aspectRatio(1, contentMode: .fit)
.frame(width: 200)ο aspectRatio ο τροποποιητής διασφαλίζει ότι το Circle διατηρεί μια αναλογία διαστάσεων 1:1, που σημαίνει ότι θα είναι τόσο ψηλό όσο και φαρδύ, έως μέγιστο πλάτος 200 σημείων.
Χρησιμοποιώντας ελάχιστες και μέγιστες διαστάσεις καρέ
Μερικές φορές θέλετε να ορίσετε ελάχιστες ή μέγιστες διαστάσεις για τα σχήματά σας για να διασφαλίσετε ότι φαίνονται καλά σε όλες τις συσκευές.
Ellipse()
.frame(minWidth: 100, maxWidth: 200, minHeight: 50, maxHeight: 100)Σε αυτόν τον κώδικα, το Ellipse θα κλιμακωθεί μεταξύ των καθορισμένων ελάχιστων και μέγιστων διαστάσεων, επιτρέποντας ευέλικτη σχεδίαση χωρίς να διακυβεύεται η ακεραιότητα του σχήματος.
Το μέγεθος των σχημάτων στο SwiftUI μπορεί να κυμαίνεται από σταθερό και απλό έως ευέλικτο και με απόκριση. Έχει να κάνει με την επιλογή του κατάλληλου εργαλείου για τη δουλειά—είτε πρόκειται για ένα σταθερό πλαίσιο για ακριβή έλεγχο, GeometryReader για διατάξεις με απόκριση ή συνδυασμό αποστατών και αναλογιών διαστάσεων για τη διατήρηση του τέλειου μεγέθους σχήματος και θέσης.
