Spacer وZStack
جزء من قسم مقدمة إلى SwiftUI في رحلة Swift على Coddy. الدرس 12 من 50.
يشغل Spacer كل المساحة الفارغة في المكدس. في HStack يدفع العروض التي تسبقه إلى اليسار والعروض التي تليه إلى اليمين:
HStack {
Text("Total")
Spacer()
Text("$12.50")
}في VStack، يدفع Spacer العروض بعيدًا عن بعضها رأسيًا.
ZStack يضع العروض فوق بعضها بعضًا. يكون العرض الأول في الخلف، ويُوضَع كل عرض تالٍ فوقه:
ZStack {
Color.blue
Text("On top")
.foregroundStyle(.white)
}عند استخدام Color.blue كطريقة عرض، فإنه يملأ كل المساحة الممنوحة له، لذا يصبح هنا خلفية زرقاء خلف النص.
التحدي
سهلاجعل صف الإجمالي يمتد على العرض بالكامل: أضف Spacer بين Total و$12.50 لدفع السعر إلى الحافة اليمنى.
جرّب بنفسك
import SwiftUI
@main
struct CoddyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
اختبر نفسكيتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس مقدمة إلى SwiftUI
تدرّب بنفسك: Playground لـ SwiftUI