คู่มือนี้สาธิตวิธีทำให้ไอคอนการนำทางในแถบแอปด้านบนทำการนำทาง
ตัวอย่าง
ข้อมูลโค้ดต่อไปนี้เป็นตัวอย่างแบบมินิมอลของวิธีใช้แถบแอปด้านบนที่มีไอคอนการนําทางที่ใช้งานได้ ในกรณีนี้ ไอคอนจะนำผู้ใช้ไปยังปลายทางก่อนหน้าในแอป
@Composable fun TopBarNavigationExample( navigateBack: () -> Unit, ) { Scaffold( topBar = { CenterAlignedTopAppBar( title = { Text( "Navigation example", ) }, navigationIcon = { IconButton(onClick = navigateBack) { Icon( imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Localized description" ) } }, ) }, ) { innerPadding -> Text( "Click the back button to pop from the back stack.", modifier = Modifier.padding(innerPadding), ) } }
ประเด็นสำคัญเกี่ยวกับโค้ด
โปรดสังเกตสิ่งต่อไปนี้ในตัวอย่างนี้
TopBarNavigationExample
แบบคอมโพสิเบิลจะกําหนดพารามิเตอร์navigateBack
ประเภท() -> Unit
- และส่ง
navigateBack
สําหรับพารามิเตอร์navigationIcon
ของCenterAlignedTopAppBar
ดังนั้น เมื่อใดก็ตามที่ผู้ใช้คลิกไอคอนการนำทางในแอปด้านบน ระบบจะเรียกใช้ navigateBack()
ส่งผ่านฟังก์ชัน
ตัวอย่างนี้ใช้ลูกศรกลับเป็นไอคอน ดังนั้นอาร์กิวเมนต์สําหรับ navigateBack()
ควรนําผู้ใช้ไปยังปลายทางก่อนหน้า
โดยโอนสาย TopBarNavigationExample
ไปยัง NavController.popBackStack()
ซึ่งคุณทําได้ในส่วนที่สร้างกราฟการนําทาง เช่น
NavHost(navController, startDestination = "home") {
composable("topBarNavigationExample") {
TopBarNavigationExample{ navController.popBackStack() }
}
// Other destinations...
แหล่งข้อมูลเพิ่มเติม
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้การนำทางในแอปได้จากชุดคำแนะนำต่อไปนี้