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
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(...) {...}
}