คู่มือนี้แสดงวิธีทำให้ไอคอนการนำทางในแถบแอปด้านบนดำเนินการนำทาง
ตัวอย่าง
ข้อมูลโค้ดต่อไปนี้เป็นตัวอย่างแบบเรียบง่ายที่สุดของวิธีใช้แถบแอปด้านบนที่มีไอคอนการนำทางที่ใช้งานได้ ในกรณีนี้ ไอคอนจะนำผู้ใช้ไปยัง ปลายทางก่อนหน้าในแอป
@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), ) } }
ประเด็นสำคัญเกี่ยวกับโค้ด
โปรดสังเกตสิ่งต่อไปนี้ในตัวอย่างนี้
- Composable
TopBarNavigationExample
กำหนดพารามิเตอร์navigateBack
ประเภท() -> Unit
- โดยจะส่ง
navigateBack
สำหรับพารามิเตอร์navigationIcon
ของCenterAlignedTopAppBar
ดังนั้น เมื่อใดก็ตามที่ผู้ใช้คลิกไอคอนการนำทางในแถบแอปด้านบน ระบบจะเรียกใช้ navigateBack()
ส่งฟังก์ชัน
ตัวอย่างนี้ใช้ลูกศรย้อนกลับเป็นไอคอน ดังนั้น อาร์กิวเมนต์สำหรับ
navigateBack()
ควรนำผู้ใช้ไปยังปลายทางก่อนหน้า
โดยทำได้ด้วยการส่งTopBarNavigationExample
การเรียกไปยัง
NavController.popBackStack()
คุณทำได้ในส่วนที่สร้างกราฟ
การนำทาง เช่น
NavHost(navController, startDestination = "home") {
composable("topBarNavigationExample") {
TopBarNavigationExample{ navController.popBackStack() }
}
// Other destinations...
แหล่งข้อมูลเพิ่มเติม
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีติดตั้งใช้งานการนำทางในแอปได้ที่ชุดคำแนะนำต่อไปนี้