TV应用中如何让Column将选中项滚动至视口更上方位置？

我完全懂你遇到的糟心问题——原本用TvLazyColumn好好的，换成普通Column后，滚动时选中的内容直接卡在视口底部，自己捣鼓的临时hack还带来了明显的卡顿，体验太差了。

其实问题根源很简单：TvLazyColumn是专门为TV场景优化的，内置了自动调整选中项在视口中位置的逻辑，但普通Column没有这个“贴心”的默认行为，所以得我们手动来实现。

给你一个更优雅、无卡顿的解决方案，核心思路是监听焦点变化，主动平滑滚动到目标位置，具体步骤和代码如下：

实现思路 #

1. 给每个可获得焦点的视频货架（TvLazyRow）绑定位置监听，记录它们在Column中的顶部坐标和高度；
2. 当某个货架获得焦点时，计算出能让它移动到视口上方合适位置的滚动偏移量；
3. 用平滑滚动的方式让Column滚动到目标位置，避免生硬跳转。

代码示例 #

import androidx.compose.foundation.gestures.animateScrollTo
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.verticalScroll
import androidx.compose.foundation.lazy.items
import androidx.compose.runtime.Composable
import androidx.compose.runtime.coroutineScope
import androidx.compose.runtime.mutableStateMapOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.tv.foundation.lazy.list.TvLazyRow

// 用来存储每个货架的位置信息
data class ShelfPosition(val key: String, val top: Float, val height: Float)

@Composable
fun OptimizedTvColumnLayout(yourShelfList: List<ShelfData>) {
    val scrollState = rememberScrollState()
    val shelfPositions = remember { mutableStateMapOf<String, ShelfPosition>() }
    // 你可以自定义这个值，控制选中货架距离视口顶部的距离
    val targetTopOffset = 200.dp.toPx()

    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(scrollState)
    ) {
        yourShelfList.forEach { shelf ->
            TvLazyRow(
                modifier = Modifier
                    // 记录当前货架在Column中的位置
                    .onGloballyPositioned { coordinates ->
                        shelfPositions[shelf.id] = ShelfPosition(
                            key = shelf.id,
                            top = coordinates.positionInParent().y,
                            height = coordinates.size.height.toFloat()
                        )
                    }
                    // 监听焦点变化，触发滚动调整
                    .onFocusChanged { focusState ->
                        if (focusState.isFocused) {
                            shelfPositions[shelf.id]?.let { pos ->
                                // 计算目标滚动偏移量：让货架顶部距离视口顶部为targetTopOffset
                                val targetScroll = pos.top - targetTopOffset
                                // 用平滑动画滚动到目标位置，彻底解决卡顿
                                coroutineScope.launch {
                                    scrollState.animateScrollTo(targetScroll.toInt())
                                }
                            }
                        }
                    },
                // 这里添加TvLazyRow的其他配置参数
            ) {
                // 渲染货架内的视频项
                items(shelf.videoItems) { video ->
                    // 你的视频项Composable
                }
            }
        }
    }
}

// 示例数据类，根据你的实际业务调整
data class ShelfData(val id: String, val title: String, val videoItems: List<VideoItem>)
data class VideoItem(val id: String, val title: String)

方案优势 #

• 精准触发：只在焦点切换时调整滚动，不会像你之前的hack那样监听滚动状态导致重复操作；
• 平滑无卡顿：用animateScrollTo代替生硬的scrollTo，滚动过程自然流畅；
• 灵活可控：通过调整targetTopOffset，你可以随意控制选中项在视口中的位置，完全符合业务需求。

对比你之前的临时方案，这个方法从根源上解决了问题，体验和TvLazyColumn的原生表现几乎一致。

备注：内容来源于stack exchange，提问作者Tim Schmidt