androidandroid-jetpack-composeandroid-tvandroid-jetpack-compose-tv

PiviotOffset of TvLazyColunm not working for nested lists


I have a TvLazyColunm and inside that many TvLazyRows

            ComposeTvAppTheme {
                // A surface container using the 'background' color from the theme
                Column(modifier = Modifier.fillMaxSize()) {
                    TvLazyColumn(
                        pivotOffsets = PivotOffsets(parentFraction = 0f, childFraction = 0f),
                    ) {
                        items(count = 10) {
                            Column {
                                Spacer(
                                    modifier = Modifier
                                        .background(Color.Yellow)
                                        .fillParentMaxWidth()
                                        .height(50.dp)
                                )
                                TvLazyRow(
                                    pivotOffsets = PivotOffsets(
                                        parentFraction = 0f,
                                        childFraction = 0f
                                    )
                                ) {
                                    items(10) {
                                        Card(
                                            colors = CardDefaults.colors(containerColor = Color.Transparent),
                                            onClick = { }) {
                                            Box(
                                                modifier = Modifier
                                                    .background(Color.Transparent)
                                                    .padding(60.dp)
                                                    .fillParentMaxWidth(0.2f)
                                                    .height(150.dp)
                                                    .background(
                                                        Color.Red
                                                    )
                                            )
                                        }

                                    }
                                }
                            }
                        }
                    }
                }
            }

The issue is while focusing on the TvLazyRow item or the card the spacer i gave is hiding but i gave paremtFraction of TvLazyColunm as 0f so it should be visible but it is not.

Any way to solve this?

I tried changing parent fraction that worked but i had to test how much value i have to give but it is just a workaroung but not a solution.

Video Link - https://drive.google.com/file/d/1MHabJcsnBoDDoWXFh9qFMMQjIRm6D3-G/view?usp=sharing


Solution

  • You can make use of the bringIntoViewIfChildrenAreFocused modifier. This modifier will bring the entire composable in view if any of the child Composables is focused.

    Here is how you would use it:

    Column(Modifier.bringIntoViewIfChildrenAreFocused()) {
        Spacer(...)
    
        TvLazyRow(...) {...}
    }