Jetpack Compose Academy · บทเรียน

NavigationBar พร้อมแท็บหลายแท็บ

สลับส่วนระดับบนสุดจากด้านล่าง

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

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

Meet NavigationBar

Material 3 gives you NavigationBar, a bar pinned to the bottom that lets people jump between the top-level sections of your app. 📱

When to Use It

Reach for a NavigationBar when your app has three to five equally important destinations, like Home, Search, and Profile.

It Lives in the Scaffold

You usually drop the bar into a Scaffold bottomBar slot, so it stays fixed while the screen content scrolls above it.

Scaffold(
  bottomBar = { NavigationBar { /* items */ } }
) { padding -> Content(padding) }

Each Tab Is an Item

Inside the bar you add one NavigationBarItem per destination. Each item is a clickable tab with its own icon and label.

NavigationBar {
  NavigationBarItem(/* ... */)
  NavigationBarItem(/* ... */)
}

The selected Flag

Every item needs a selected boolean. Exactly one item should be true at a time so the bar shows where the user is.

NavigationBarItem(
  selected = current == "home",
  onClick = { go("home") }
)

Handle the Tap

The onClick lambda runs when the tab is pressed. This is where you tell your navigation to switch to that section.

Give It an Icon

The icon slot takes a Composable, usually an Icon from the Material set, so each tab is instantly recognizable.

icon = { Icon(Icons.Default.Home, contentDescription = "Home") }

Add a Label

The label slot shows short text under the icon. Keep it to one clear word so it fits and reads fast.

label = { Text("Home") }

A Model for Tabs

It helps to keep your tabs in a simple data class list, so the bar can loop over them instead of hard-coding each item.

data class Tab(val route: String, val icon: ImageVector, val label: String)

Loop to Build the Bar

With a tab list you can forEach over it and emit one NavigationBarItem per entry, keeping the bar tidy and easy to extend.

tabs.forEach { tab ->
  NavigationBarItem(/* uses tab fields */)
}

Pair It with Content

The bar only switches the active section. You still pair it with a NavHost or a when block that actually swaps the screen content.

Quick Check

You added three tabs to your NavigationBar. Quick check on the basics.

Recap

You met NavigationBar: drop it in the Scaffold, add a NavigationBarItem per section with an icon, label, selected flag, and onClick. Nice work! 🎉

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

บทเรียน “NavigationBar พร้อมแท็บหลายแท็บ” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “NavigationBar พร้อมแท็บหลายแท็บ”

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

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

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

บทเรียน “NavigationBar พร้อมแท็บหลายแท็บ” ใช้เวลานานแค่ไหน

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

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

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

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

← กลับไปที่ Jetpack Compose Academy