How to discover the selected item in TvLazyColumn

Question

I would like to animate the title of a row in a TVLazyColumn depending on whether it is the one in focus or not.

I can't find how to get which item in the column has the focus.

Answer 1

You can make use of the onFocusChanged modifier to know if an item is in focus or not. Attach the modifier to all rows, and you can make use of it.hasFocus to check if the focus is within the respective lazy row.

@Composable
fun App() {
    TvLazyColumn {
        item { AppRow() }
        item { AppRow() }
        item { AppRow() }
        // ...
    }
}

@Composable
fun AppRow() {
    var doesRowHaveFocus by remember { mutableStateOf(false) }

    TvLazyRow(
        modifier = Modifier
                .onFocusChange {
                    doesRowHaveFocus = it.hasFocus
                }
    ) {
        item { FocusableItem() }
        item { FocusableItem() }
        item { FocusableItem() }
        // ...
    }
}