Using Compose navigation with deeplink within LazyColumn

Question

I've read the article about handling deeplinks with Compose, but I didn't find anything for my use case - for navigation within LazyColumn. I have the following main Composable which I want to make the root of the graph (I want it to be host for NavHost):

@Composable
private fun MainScreenContainer(
    mainState: state,
    ...
) {
    val navController = rememberNavController()

    MainTheme {
        Box(
            modifier = Modifier.fillMaxSize()
        ) {
            val listState = rememberLazyListState()
            LazyColumn(
                state = listState,
                modifier = Modifier.fillMaxSize()
            ) {
                mainScreenContent(
                    state = mainState,
                    ...
                )
            }
            StickyToolbar(
                ...
            )
        }
    }
}

and here is the remaining code:

private fun LazyListScope.mainScreenContent(
    mainState: MainState,
    ...
) {
    header(...)
    overview(...)
    myCard(...)
    footer()
}

private fun LazyListScope.myCard(
    ...
) {
    item {
        ContentContainer(
            modifier = Modifier.padding(vertical = MainTheme.spacing.medium)
        ) {
            MyCardStateless(
                onCardClick = myCardViewModel::onCardClick,
                ...
            )
        }
    }
}

@Composable
fun MyCardStateless(
    onCardClick: () -> Unit,
    ...
) {
    Column(modifier = modifier) {
        Card(
            modifier = Modifier.fillMaxWidth()
                .clickable(onClick = onCardClick)
        ) { ... }
    }
}

And within MyCardViewModel I was using navigation to another fragment via Navigation Component:

fun onCardClick() {
    navigate(
        MainFragmentDirections.actionMainFragmentToDescriptionFragment()
    )
}

@AndroidEntryPoint
class DescriptionFragment : ...() {

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        ...
        setContent {
            DescriptionStateful(...)
        }
    }
    ...
}

But now I want to add 2 deeplinks ("myapp://mycard" - to MyCardStateless and "myapp://description" - to DescriptionFragment or to DescriptionStateful) and handle navigation using navigation-compose. Is it possible at all?

Using Compose navigation with deeplink within LazyColumn

0 Answers0