SwiftUI Academy · บทเรียน

แถบเครื่องมือและชื่อการนำทาง

เพิ่มชื่อและปุ่มแถบเครื่องมือลงในแถบ

บทเรียน 3 จาก 413 ขั้นตอน

แถบเครื่องมือและชื่อการนำทาง เป็นบทเรียน SwiftUI Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน SwiftUI Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส SwiftUI Academy มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Naming the Screen

Every screen deserves a clear name. The navigationTitle modifier puts a heading in the navigation bar so users always know where they are. 🧭

.navigationTitle("Inbox")

Where the Title Goes

Attach navigationTitle to the content inside the NavigationStack, not to the stack itself. The bar then reads the title from the current screen.

NavigationStack {
    List { }
        .navigationTitle("Inbox")
}

Large vs Inline

By default the title is large and shrinks as you scroll. Use navigationBarTitleDisplayMode to force a compact inline style instead.

.navigationBarTitleDisplayMode(.inline)

Adding Toolbar Buttons

The toolbar modifier lets you place buttons in the navigation bar, like an add button or an edit action for the current screen.

.toolbar {
    Button("Add") { addItem() }
}

Choosing a Placement

Wrap each control in a ToolbarItem and pick a placement so buttons land on the correct side of the bar.

.toolbar {
    ToolbarItem(placement: .topBarTrailing) {
        Button("Add") { }
    }
}

Leading and Trailing

Use topBarLeading for the left edge and topBarTrailing for the right. These adapt automatically for right-to-left languages. 🌍

Icons in the Bar

Toolbar buttons often use SF Symbols instead of words to stay compact. A small image keeps the bar tidy on every device.

Button {
    addItem()
} label: {
    Image(systemName: "plus")
}

Many Buttons at Once

You can add several ToolbarItem entries in one toolbar block, grouping related actions like edit, share, and add together.

The Bottom Toolbar

Placement is not limited to the top. Use bottomBar to pin actions to the bottom of the screen for thumb-friendly controls.

ToolbarItem(placement: .bottomBar) {
    Button("Done") { }
}

Titles Follow the Stack

Each pushed screen sets its own title, and the bar updates as you navigate. The previous title even becomes the back button label.

Keep Bars Uncluttered

Resist filling the bar with buttons. Two or three clear actions keep the screen calm and easy to scan.

Quick Check

Which modifier adds buttons to the navigation bar?

ตอบคำถามในบทเรียนแบบโต้ตอบ

Recap: Toolbar & Title

You name screens with navigationTitle and add buttons with toolbar and ToolbarItem placements. Up next, driving navigation entirely from code. 🚀

เริ่มต้นได้ฟรี

เรียนรู้ Swift ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 30
บทเรียน: 120

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “แถบเครื่องมือและชื่อการนำทาง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “แถบเครื่องมือและชื่อการนำทาง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส SwiftUI Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส SwiftUI Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “แถบเครื่องมือและชื่อการนำทาง”

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

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

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

บทเรียน “แถบเครื่องมือและชื่อการนำทาง” ใช้เวลานานแค่ไหน

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

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

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

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

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