如何在TvLazyColumn中获取焦点项并实现标题动画

在Jetpack Compose for TV中，你不需要单独“获取”整个列表的焦点项，而是直接给每个列表项绑定焦点状态监听，再基于状态变化触发动画。具体实现步骤如下：

• 给每个TVLazyColumn的item添加Modifier.onFocusChanged，实时监听当前项的焦点状态
• 用Compose的动画API（比如animateColorAsState、animateScaleAsState），根据焦点状态动态修改标题的样式
• 把动画状态绑定到标题的UI属性上（比如文字颜色、缩放比例）

完整示例代码 #

@Composable
fun FocusAnimatedTVList() {
    val items = List(20) { "列表项 $it" }

    TVLazyColumn {
        items(items) { itemText ->
            var isFocused by remember { mutableStateOf(false) }

            // 动画状态：根据焦点变化切换颜色和缩放
            val titleColor by animateColorAsState(
                targetValue = if (isFocused) Color.White else Color.Gray,
                animationSpec = tween(durationMillis = 200)
            )
            val titleScale by animateFloatAsState(
                targetValue = if (isFocused) 1.1f else 1f,
                animationSpec = spring(stiffness = Spring.StiffnessMedium)
            )

            // 列表项布局：绑定焦点监听
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(64.dp)
                    .padding(horizontal = 16.dp)
                    .onFocusChanged { focusState ->
                        isFocused = focusState.isFocused
                    }
                    .background(if (isFocused) Color.DarkGray else Color.Transparent)
                    .padding(horizontal = 16.dp, vertical = 8.dp),
                contentAlignment = Alignment.CenterStart
            ) {
                // 带动画的标题
                Text(
                    text = itemText,
                    color = titleColor,
                    fontSize = 20.sp,
                    modifier = Modifier.scale(titleScale)
                )
            }
        }
    }
}

关键说明 #

• onFocusChanged会在项的焦点状态变化时回调，直接更新isFocused状态变量
• 动画API会自动根据状态变化执行过渡动画，无需手动管理动画生命周期
• 如果需要全局跟踪当前焦点项，可以把isFocused提升到父Composable，用一个变量记录当前焦点的item ID，再针对该ID的项应用动画（适合需要联动其他UI的场景）

内容的提问来源于stack exchange，提问作者Code Rebel