TV端Jetpack Compose：如何滚动Column使所有子项完整显示？

核心原因 #

TV端焦点导航默认仅保证聚焦的LazyRow子项处于屏幕可见范围，未关联上方的标题文本，导致向上滚动时标题被顶出屏幕。我们需要通过控制父滚动容器的滚动位置，确保顶部AlignedRow的标题与LazyRow同时完整显示。

具体实现方案 #

1. 替换父容器为LazyColumn并管理滚动状态 #

普通Column的滚动控制灵活性不足，换成LazyColumn并通过LazyListState精准控制滚动位置：

val lazyListState = rememberLazyListState()
val coroutineScope = rememberCoroutineScope()

LazyColumn(state = lazyListState) {
    items(dataList) { data ->
        AlignedRow(
            data = data,
            onItemFocused = {
                val index = dataList.indexOf(data)
                coroutineScope.launch {
                    // 滚动到当前AlignedRow的顶部，确保标题可见
                    lazyListState.scrollToItem(index, scrollOffset = 0)
                }
            }
        )
    }
}

2. 给AlignedRow添加焦点监听逻辑 #

在AlignedRow内部监听LazyRow子项的焦点变化，触发父容器滚动：

@Composable
fun AlignedRow(data: RowData?, onItemFocused: () -> Unit) {
    if (data == null) return
    
    Column(modifier = Modifier.fillMaxWidth()) {
        Text(
            text = data.title,
            modifier = Modifier.padding(16.dp),
            style = TextStyle(fontSize = 20.sp, fontWeight = FontWeight.Bold)
        )
        LazyRow(contentPadding = PaddingValues(horizontal = 16.dp)) {
            items(data.rowList) { item ->
                RowItem(
                    item = item,
                    modifier = Modifier.onFocusChanged { focusState ->
                        if (focusState.isFocused) {
                            onItemFocused()
                        }
                    }
                )
            }
        }
    }
}

@Composable
fun RowItem(item: ItemData, modifier: Modifier = Modifier) {
    Box(
        modifier = modifier
            .size(120.dp, 180.dp)
            .background(Color.Gray)
            .padding(8.dp)
    ) {
        Text(text = item.name)
    }
}

3. 优化：避免不必要的滚动 #

判断目标AlignedRow是否已完全显示，仅在需要时触发滚动：

coroutineScope.launch {
    val layoutInfo = lazyListState.layoutInfo
    val visibleItems = layoutInfo.visibleItemsInfo
    val targetItem = visibleItems.find { it.index == index }
    
    // 仅当目标AlignedRow未完全在屏幕顶部显示时执行滚动
    if (targetItem == null || targetItem.offset > 0) {
        lazyListState.scrollToItem(index, scrollOffset = 0)
    }
}

额外说明 #

• 若坚持使用普通Column，可通过ScrollState结合Modifier.verticalScroll，配合focusRequester计算滚动偏移量实现，但复杂度更高，优先推荐LazyColumn方案。
• TV端需保证焦点移动流畅性，异步执行滚动可避免视觉抖动。

内容的提问来源于stack exchange，提问作者Rahul Rawat