TvLazyColumn的PivotOffset在嵌套列表中失效问题求助

问题场景 #

开发Compose TV应用时，使用TvLazyColumn嵌套多个TvLazyRow，当聚焦TvLazyRow内的Card组件时，上方的黄色Spacer会被隐藏。即使设置TvLazyColumn的parentFraction=0f也无法解决，调整该参数仅为临时 workaround，需要根本解决方案。

根本解决方案 #

方案1：将列表项容器设为焦点锚点 #

把包含Spacer和TvLazyRow的Column容器设置为可聚焦元素，通过焦点属性控制，让TvLazyColumn将整个列表项作为滚动锚点，而非内部的Card组件。修改后的代码如下：

ComposeTvAppTheme {
    Column(modifier = Modifier.fillMaxSize()) {
        TvLazyColumn(
            pivotOffsets = PivotOffsets(parentFraction = 0f, childFraction = 0f),
        ) {
            items(count = 10) {
                val focusRequester = remember { FocusRequester() }
                Column(
                    modifier = Modifier
                        .focusRequester(focusRequester)
                        .focusable(true)
                        .focusProperties {
                            // 标记父容器为焦点锚点，避免内部项触发父级滚动
                            focusedChild = FocusRequester.Cancel
                        }
                ) {
                    Spacer(
                        modifier = Modifier
                            .background(Color.Yellow)
                            .fillParentMaxWidth()
                            .height(50.dp)
                    )
                    TvLazyRow(
                        pivotOffsets = PivotOffsets(parentFraction = 0f, childFraction = 0f),
                        modifier = Modifier.focusable(false)
                    ) {
                        items(10) {
                            Card(
                                colors = CardDefaults.colors(containerColor = Color.Transparent),
                                onClick = { },
                                modifier = Modifier.focusRequester(focusRequester)
                            ) {
                                Box(
                                    modifier = Modifier
                                        .background(Color.Transparent)
                                        .padding(60.dp)
                                        .fillParentMaxWidth(0.2f)
                                        .height(150.dp)
                                        .background(Color.Red)
                                )
                            }
                        }
                    }
                }
            }
        }
    }
}

方案2：手动控制TvLazyColumn滚动状态 #

通过LazyListState拦截自动滚动行为，确保内部项聚焦时，TvLazyColumn保持当前滚动位置，不自动调整：

ComposeTvAppTheme {
    Column(modifier = Modifier.fillMaxSize()) {
        val lazyColumnState = rememberLazyListState()
        TvLazyColumn(
            state = lazyColumnState,
            pivotOffsets = PivotOffsets(parentFraction = 0f, childFraction = 0f),
            modifier = Modifier.onFocusChanged {
                if (it.isFocused) {
                    // 锁定滚动位置，阻止自动滚动
                    lazyColumnState.scrollToItem(lazyColumnState.firstVisibleItemIndex)
                }
            }
        ) {
            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)
                                )
                            }
                        }
                    }
                }
            }
        }
    }
}

核心原理 #

Compose TV的TvLazyColumn默认会在子元素获得焦点时，自动滚动以将焦点元素对齐到容器的指定枢轴位置。当嵌套TvLazyRow时，内部Card的焦点会被TvLazyColumn识别为子元素，触发滚动导致上方Spacer移出可视区域。上述两种方案分别通过指定焦点锚点和锁定滚动状态，从根源上阻止了TvLazyColumn的自动滚动行为，确保Spacer始终可见。

内容的提问来源于stack exchange，提问作者Bharat Kumar