คู่มือนี้จะสาธิตวิธีสร้างไอคอนการนำทางในแอปยอดนิยม ดำเนินการนำทาง
ตัวอย่าง
ข้อมูลโค้ดต่อไปนี้เป็นตัวอย่างสั้นๆ ของวิธีใช้งานแอปยอดนิยม ที่มีไอคอนการนำทางที่ใช้งานได้ ในกรณีนี้ ไอคอนจะนำผู้ใช้ไปยัง ปลายทางก่อนหน้าของผู้ใช้ในแอป
@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...
แหล่งข้อมูลเพิ่มเติม
สําหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้การนําทางในแอป โปรดดูที่ ชุดคำแนะนำต่อไปนี้