NavDisplay
มีความสามารถในการแสดงภาพเคลื่อนไหวในตัวเพื่อสร้างการเปลี่ยนภาพอย่างราบรื่นเมื่อผู้ใช้ไปยังส่วนต่างๆ ของแอป คุณสามารถปรับแต่งภาพเคลื่อนไหวเหล่านี้ได้ทั่วโลกสำหรับ NavDisplay
หรือตามแต่ละ NavEntry
โดยใช้ข้อมูลเมตา
ลบล้างทรานซิชันเริ่มต้น
NavDisplay
ใช้ ContentTransform
เพื่อกำหนดลักษณะที่เนื้อหาเคลื่อนไหวระหว่างการไปยังส่วนต่างๆ คุณลบล้างลักษณะการทำงานของภาพเคลื่อนไหวเริ่มต้นได้โดยระบุพารามิเตอร์การเปลี่ยนไปยัง NavDisplay
transitionSpec
: พารามิเตอร์นี้จะกำหนดContentTransform
ที่จะใช้เมื่อเพิ่มเนื้อหาลงในกองซ้อนที่ซ้อนกัน (กล่าวคือ เมื่อไปยังหน้าถัดไป)popTransitionSpec
: พารามิเตอร์นี้กำหนดContentTransform
ที่จะมีผลเมื่อนำเนื้อหาออกจากกองซ้อนที่ซ้อนกัน (กล่าวคือ เมื่อไปยังหน้าก่อนหน้า)predictivePopTransitionSpec
: พารามิเตอร์นี้กําหนดContentTransform
ที่จะนําไปใช้เมื่อเนื้อหาปรากฏขึ้นโดยใช้ท่าทางสัมผัสการกดกลับแบบคาดการณ์
ลบล้างการเปลี่ยนที่ระดับ NavEntry
แต่ละรายการ
นอกจากนี้ คุณยังกำหนดภาพเคลื่อนไหวที่กำหนดเองสำหรับ NavEntry
บางรายการได้โดยใช้ข้อมูลเมตา NavDisplay
จดจำคีย์ข้อมูลเมตาพิเศษเพื่อใช้ทรานซิชันต่อรายการ ดังนี้
NavDisplay.transitionSpec
: ใช้ฟังก์ชันตัวช่วยนี้เพื่อกำหนดภาพเคลื่อนไหวการนำทางไปข้างหน้าNavDisplay.popTransitionSpec
: ใช้ฟังก์ชันตัวช่วยนี้เพื่อกำหนดภาพเคลื่อนไหวการนำทางย้อนกลับสำหรับNavEntry
ที่เฉพาะเจาะจงNavDisplay.predictivePopTransitionSpec
: ใช้ฟังก์ชันตัวช่วยนี้เพื่อกำหนดภาพเคลื่อนไหวสำหรับท่าทางสัมผัสแบบคาดคะเนเพื่อกลับสำหรับNavEntry
ที่เฉพาะเจาะจง
การเปลี่ยนข้อมูลเมตาต่อรายการเหล่านี้จะลบล้างการเปลี่ยนข้อมูลเมตาส่วนกลางที่มีชื่อเดียวกันของ NavDisplay
ข้อมูลโค้ดต่อไปนี้แสดงทั้งการเปลี่ยน NavDisplay
ระดับส่วนกลางและการลบล้างที่ระดับ NavEntry
แต่ละรายการ
@Serializable data object ScreenA : NavKey @Serializable data object ScreenB : NavKey @Serializable data object ScreenC : NavKey class AnimatedNavDisplayActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { Scaffold { paddingValues -> val backStack = rememberNavBackStack(ScreenA) NavDisplay( backStack = backStack, onBack = { backStack.removeLastOrNull() }, entryProvider = entryProvider { entry<ScreenA> { ContentOrange("This is Screen A") { Button(onClick = { backStack.add(ScreenB) }) { Text("Go to Screen B") } } } entry<ScreenB> { ContentMauve("This is Screen B") { Button(onClick = { backStack.add(ScreenC) }) { Text("Go to Screen C") } } } entry<ScreenC>( metadata = NavDisplay.transitionSpec { // Slide new content up, keeping the old content in place underneath slideInVertically( initialOffsetY = { it }, animationSpec = tween(1000) ) togetherWith ExitTransition.KeepUntilTransitionsFinished } + NavDisplay.popTransitionSpec { // Slide old content down, revealing the new content in place underneath EnterTransition.None togetherWith slideOutVertically( targetOffsetY = { it }, animationSpec = tween(1000) ) } + NavDisplay.predictivePopTransitionSpec { // Slide old content down, revealing the new content in place underneath EnterTransition.None togetherWith slideOutVertically( targetOffsetY = { it }, animationSpec = tween(1000) ) } ) { ContentGreen("This is Screen C") } }, transitionSpec = { // Slide in from right when navigating forward slideInHorizontally(initialOffsetX = { it }) togetherWith slideOutHorizontally(targetOffsetX = { -it }) }, popTransitionSpec = { // Slide in from left when navigating back slideInHorizontally(initialOffsetX = { -it }) togetherWith slideOutHorizontally(targetOffsetX = { it }) }, predictivePopTransitionSpec = { // Slide in from left when navigating back slideInHorizontally(initialOffsetX = { -it }) togetherWith slideOutHorizontally(targetOffsetX = { it }) }, modifier = Modifier.padding(paddingValues) ) } } } }