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) ) } } } }