如何在Jetpack Compose的TvLazyRow/TvLazyColumn中固定锚点项位置

当使用TvLazyRow结合PivotOffsets固定焦点项位置时，滚动到首尾出现焦点贴边的问题，核心原因是默认滚动边界限制了内容的偏移范围。可以通过给列表添加首尾内边距来扩展滚动范围，让焦点项始终保持在固定位置。

具体实现步骤 #

1. 计算所需内边距：根据你的PivotOffsets设置和项的宽度，算出首尾需要的空白空间，确保首尾项滚动后能让焦点停在目标位置。
2. 将计算出的内边距通过contentPadding传给TvLazyRow。

代码示例 #

@Composable
fun FixedFocusPositionRow(itemsList: List<YourItemType>) {
    val screenWidth = LocalConfiguration.current.screenWidthDp.dp
    val itemWidth = 120.dp // 替换为你的项实际宽度
    val targetPivotX = 0.2f // 你设置的PivotOffsets.x值，比如让焦点在屏幕20%的位置

    // 计算首尾内边距，让焦点项始终对齐到目标位置
    val startPadding = screenWidth * targetPivotX - itemWidth / 2
    val endPadding = screenWidth * (1 - targetPivotX) - itemWidth / 2

    TvLazyRow(
        modifier = Modifier.fillMaxWidth(),
        state = rememberTvLazyListState(),
        contentPadding = PaddingValues(start = startPadding, end = endPadding),
        pivotOffsets = PivotOffsets(targetPivotX, 0.5f)
    ) {
        items(itemsList) { item ->
            // 你的项布局组件
            ItemCard(item = item, modifier = Modifier.width(itemWidth))
        }
    }
}

// 示例项布局
@Composable
fun ItemCard(item: YourItemType, modifier: Modifier = Modifier) {
    Card(
        modifier = modifier
            .height(180.dp)
            .focusable(),
        colors = CardDefaults.cardColors(
            focusedColor = Color.DarkGray,
            contentColor = Color.White
        )
    ) {
        // 项内容
        Text(text = item.title, modifier = Modifier.align(Alignment.Center))
    }
}

原理说明 #

默认TvLazyRow的滚动边界是内容的首尾，当滚动到尽头时无法继续偏移来维持PivotOffsets的位置。添加首尾内边距后，相当于给列表内容扩展了空白滚动区域，让列表可以滚动到这些空白区域内，从而保证焦点项始终对齐到你设置的固定位置，即使在首尾项也不会贴边。

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