Jetpack Compose Academy · บทเรียน

เน้นเส้นทางที่เลือก

ซิงค์การเลือกกับสแตกย้อนกลับ

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

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

Selection Must Be Real

A tab should light up because of where the user actually is, not a value you set by hand. The back stack is your source of truth. 🧭

Read the Current Entry

Ask the NavController for the live currentBackStackEntryAsState. It updates automatically every time navigation changes.

val entry by navController.currentBackStackEntryAsState()

Get the Active Route

From that entry you read the active route string off its destination. That string tells you which tab is showing.

val route = entry?.destination?.route

Compare to Mark Selected

Now set each item selected by comparing the active route to that tab route. The match becomes the highlighted selected tab.

selected = route == tab.route

Hierarchy Beats Equality

For nested graphs, exact equality can miss. Checking the destination hierarchy marks a tab active even on its sub-screens.

selected = entry?.destination?.hierarchy?.any {
  it.route == tab.route
} == true

Navigate on Tap

In onClick, call navController.navigate with the tab route to move there. The selection then follows the back stack on its own.

onClick = { navController.navigate(tab.route) }

Avoid Stacking Copies

Tapping a tab repeatedly should not pile up screens. Use launchSingleTop so only one copy of a destination stays on top.

navController.navigate(tab.route) {
  launchSingleTop = true
}

Pop to the Start

Pressing back from any tab should return to your home tab, not walk every tab you visited. popUpTo the start destination fixes that.

popUpTo(navController.graph.startDestinationId) {
  saveState = true
}

Tint the Active Tab

NavigationBarItem auto-tints the selected item, but you can theme it with colors so the active tab matches your brand.

colors = NavigationBarItemDefaults.colors(
  selectedIconColor = MaterialTheme.colorScheme.primary
)

Label Visibility

Use alwaysShowLabel to decide if unselected tabs still show text. Showing only the active label is a common clean look.

alwaysShowLabel = false

One Reactive Loop

Put it together: read the route once, then in your forEach compare each tab to it. Selection now mirrors navigation perfectly.

Quick Check

You wired selection to the back stack. One quick question.

Recap

You synced highlighting to the back stack: read the current route, compare per tab, navigate with launchSingleTop and popUpTo. Selection now stays honest. 🎯

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

บทเรียน “เน้นเส้นทางที่เลือก” ฟรีหรือไม่

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

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

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

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

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

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

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

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

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

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

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