在 TvLazyRow 中如何让标题与项目对齐，提升用户界面直观度？

2024-03-07 15:31:27

TvLazyRow：让标题与项目枢轴偏移量对齐

导言

在打造流媒体应用时，提供直观的用户界面至关重要。为了实现这一目标，我们可以利用 Jetpack Compose 中的 TvLazyRow 组件，该组件允许我们在水平方向上以懒加载方式展示项目。然而，当我们希望让标题与当前高亮的项目对齐时，就会遇到一个挑战。本文将探讨如何通过匹配 TvLazyRow 标题与项目的枢轴偏移量来解决这一难题。

枢轴偏移量详解

枢轴偏移量是指项目相对于其容器开始位置的偏移量。当用户在 TvLazyRow 中导航时，当前高亮项目的枢轴偏移量会不断变化。通过匹配标题与枢轴偏移量，我们可以确保标题始终与高亮项目保持对齐。

实现步骤

匹配标题与枢轴偏移量需要以下步骤：

1. 计算枢轴偏移量

使用 TvRow 组件的 calculateCurrentPivotOffsetForIndex 方法来计算当前高亮项目的枢轴偏移量。

2. 调整标题位置

通过设置 TvRow 组件的 contentPadding 属性来调整标题位置。左侧和右侧间距应与枢轴偏移量相等。

3. 设置标题大小

使用 width 修饰符确保标题宽度等于 TvRow 组件的宽度。

代码示例

TvRow(
    contentPadding = PaddingValues(
        start = currentPivotOffset.value,
        end = currentPivotOffset.value
    ),
    modifier = Modifier.width(IntrinsicSize.Max)
) {
    Text(text = title)
    // ...
}

优势