SwiftUI Academy · บทเรียน

รายการแท็บและป้ายแจ้งเตือน

เพิ่มไอคอน ชื่อ และป้ายแจ้งเตือน

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

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

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

Polishing Each Tab

Now you will make each tab clearer with the right icon, a short title, and a notification badge when needed. 🎨

Icons with SF Symbols

Pass an SF Symbol name to Label so each tab gets a crisp, scalable icon that matches the system style.

Label("Profile", systemImage: "person.crop.circle")

Keep Titles Short

Tab titles sit in a tight space, so keep them to one clear word like Home, Search, or Profile.

Selected vs Unselected

iOS automatically highlights the active tab. Many symbols even swap to a filled variant when selected, with no code from you.

Choosing Good Symbols

Pick symbols whose meaning is obvious. A house for home and a gear for settings need no explanation.

What a Badge Shows

A badge is the small red bubble on a tab that signals unread items, like new messages waiting for you. 🔴

Adding a Number Badge

The badge modifier puts a count on a tab. Pass a number and the bubble appears automatically.

InboxScreen()
    .tabItem { Label("Inbox", systemImage: "tray") }
    .badge(3)

Text Badges

You can also pass a string to badge, useful for short markers like "New" instead of a count.

.badge("New")

Hiding a Badge

Set the badge to zero or an empty value and SwiftUI hides the bubble, so it appears only when it matters.

.badge(unreadCount)

Driving Badges from State

Bind the badge to a state value so the count updates live as new items arrive or get read.

Badges Demand Attention

Use badges sparingly. A bubble pulls the eye, so reserve it for things the user truly needs to notice. 👀

Quick Check

Let us check how to show an unread count on a tab.

Recap: Tab Items & Badges

Clear icons and short titles make tabs scannable, and the badge modifier surfaces counts or markers right when users need them. 🎉

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

เรียนรู้ 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 ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “รายการแท็บและป้ายแจ้งเตือน” ใช้เวลานานแค่ไหน

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

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

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

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

  1. การสร้างแถบแท็บ
  2. รายการแท็บและป้ายแจ้งเตือน
  3. การผูกแท็บที่เลือก
  4. การรวมแท็บเข้ากับ Stack
← กลับไปที่ SwiftUI Academy