SwiftUI Academy · บทเรียน

แถวด้วย HStack

วาง View เรียงข้างกันในแนวนอน

แถวด้วย HStack เป็นบทเรียน SwiftUI Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 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” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส SwiftUI Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส SwiftUI Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “แถวด้วย HStack”

วาง View เรียงข้างกันในแนวนอน คุณปฏิบัติ SwiftUI Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน SwiftUI Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน SwiftUI Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “แถวด้วย HStack” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน SwiftUI Academy นี้ได้ไหม

ได้ บทเรียน SwiftUI Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ SwiftUI Academy