реактивный ранец составить перемещение составного объекта по оси x с помощью анимации

У меня есть пользовательская навигационная рейка внутри моего экрана, которая fillMaxWidth().

Появляется и исчезает вместе с AnimatedContent() и я хочу изменить положение экрана, когда NavigationRailскользит внутрь или выдвигается. Я пытался использовать Row (), но экран не прокручивается плавно, какой Compose Api мне следует использовать? и это мой код

      val navController = rememberNavController()
var currentScreen by remember {
    mutableStateOf(Screens.Home)
}
val screenWidth = LocalConfiguration.current.screenWidthDp.dp
val railWidth = remember {
    mutableStateOf(0F)
}
val navigationVisibility = remember {
    mutableStateOf(false)
}
Row(modifier = Modifier.fillMaxSize()) {
    Surface(
        modifier = Modifier
            .fillMaxSize()
    ) {
        AnimatedVisibility(
            visible = navigationVisibility.value,
            enter = slideInHorizontally(
                initialOffsetX = { -(railWidth.value.toInt()) }
            ),
            exit = slideOutHorizontally()
        ) {
            NavigationRail(
                modifier = Modifier
                    .width(96.dp)
                    .fillMaxHeight()
                    .onGloballyPositioned {
                        railWidth.value = it.size.toSize().width
                    }, selectedScreen = currentScreen
            ) {
                currentScreen = it
            }
        }
        NavHost(
            modifier = Modifier
                .width(screenWidth),
            navController = navController,
            startDestination = currentScreen.toString()
        ) {
            composable(route = Screens.Home.toString()) {
                HomeScreen { navigationVisibility.value = true }
            }
            composable(route = Screens.Playlists.toString()) {
                PlayListScreen()
            }
            composable(route = Screens.Tracks.toString()) {
                TracksScreen()
            }
            composable(route = Screens.Creators.toString()) {
                CreatorsScreen()
            }
            composable(route = Screens.News.toString()) {
                NewsScreen()
            }
        }
    }
}

0 ответов

Другие вопросы по тегам