الصفوف باستخدام HStack
ضع View جنباً إلى جنب أفقياً
الصفوف باستخدام HStack درس مجاني في SwiftUI Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في SwiftUI Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة SwiftUI Academy 4 دروس في المجموع.
بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.
Going Horizontal
Sometimes views belong side by side, not stacked down. For that you reach for the horizontal sibling of VStack. ➡️
Meet HStack
An HStack arranges its children horizontally, left to right. It is perfect for rows like an icon next to a label.
Your First HStack
Put views inside the HStack braces and they line up across the screen in the order you wrote them.
HStack {
Text("Left")
Text("Right")
}Left to Right Order
In an HStack the first child sits on the leading edge and later children follow toward the trailing edge. Code order is left-to-right order.
Icon Plus Label
A classic HStack pairs an Image with a Text so an icon and its caption stay on one line, like a row in a settings screen.
HStack {
Image(systemName: "bell")
Text("Alerts")
}Centered Vertically
By default an HStack aligns its children to the vertical center, so a tall image and short text line up neatly along their middles.
HStack Hugs Its Content
Just like VStack, an HStack shrinks to fit its children rather than filling the whole width. It takes only the space it needs.
Combining HStack and VStack
Nest an HStack inside a VStack to build a card: a title row on top and a detail row below. Mixing both directions builds real layouts.
VStack {
Text("Title")
HStack {
Text("A")
Text("B")
}
}HStack Is a View
An HStack is a view too, so modifiers like padding or background apply to the entire row at once, treating it as a single block.
Mixed Content Rows
An HStack happily holds different view types together, like a number, a label, and a button all sharing one horizontal line.
HStack {
Text("42")
Button("Add") { }
}When to Reach for HStack
Use an HStack whenever items read left to right: a label and value, a toolbar of buttons, or an avatar beside a name.
Quick Check
Let's confirm how HStack lays things out.
Recap: Horizontal Rows
Great progress! An HStack lines views up left to right, centers them vertically, and pairs beautifully with VStack to build cards and rows. 🙌
الأسئلة الشائعة
هل درس «الصفوف باستخدام HStack» مجاني؟
نعم — نص درس «الصفوف باستخدام HStack» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة SwiftUI Academy، انتقل إلى CoddyKit PRO. تتضمن دورة SwiftUI Academy 4 دروس في المجموع.
ماذا ستتعلم في «الصفوف باستخدام HStack»؟
ضع View جنباً إلى جنب أفقياً تتمرن على SwiftUI Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ SwiftUI Academy؟
لا تُشترط خبرة سابقة. SwiftUI Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «الصفوف باستخدام HStack»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس SwiftUI Academy هذا؟
نعم. كل درس في SwiftUI Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- ترتيب View عمودياً
- الصفوف باستخدام HStack
- التكديس باستخدام ZStack
- المسافات والمحاذاة في حاويات التكديس