NavDisplay قابلیتهای پویانمایی داخلی را برای ایجاد انتقالهای بصری صاف در حین حرکت کاربران در برنامه شما فراهم میکند. شما می توانید این انیمیشن ها را به صورت جهانی برای NavDisplay یا بر اساس هر NavEntry با استفاده از ابرداده سفارشی کنید.
نادیده گرفتن انتقال های پیش فرض
NavDisplay از ContentTransform s برای تعریف نحوه متحرک شدن محتوا در حین پیمایش استفاده می کند. میتوانید با ارائه پارامترهای انتقال به 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) ) } } } }