如何在Android Jetpack Compose的Column中实现带滑动指示器的可滚动TabRow

核心思路 #

1. 记录当前选中的列表项索引
2. 获取选中项的布局位置与尺寸信息
3. 借助Compose动画API实现指示器的平滑偏移与大小适配

具体实现代码 #

首先定义关键状态变量：

// 记录选中项索引
var selectedIndex by remember { mutableStateOf(0) }
// 存储每个列表项的布局边界信息
val itemBounds = remember { mutableStateMapOf<Int, Rect>() }
// 指示器垂直偏移的动画状态
val indicatorOffset by animateIntAsState(
    targetValue = itemBounds[selectedIndex]?.top?.toInt() ?: 0,
    animationSpec = tween(durationMillis = 300)
)
// 指示器高度的动画状态
val indicatorHeight by animateIntAsState(
    targetValue = itemBounds[selectedIndex]?.height()?.toInt() ?: 0,
    animationSpec = tween(durationMillis = 300)
)

然后构建带指示器的LazyColumn布局：

Box(modifier = Modifier.fillMaxSize()) {
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        contentPadding = PaddingValues(horizontal = 16.dp)
    ) {
        items(10) { index ->
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(vertical = 8.dp)
                    .clickable { selectedIndex = index }
                    .onGloballyPositioned { coordinates ->
                        // 保存当前项在父布局中的边界信息
                        itemBounds[index] = coordinates.boundsInParent()
                    }
            ) {
                Text(
                    text = "列表项 $index",
                    fontSize = 18.sp,
                    color = if (index == selectedIndex) Color.Blue else Color.Black
                )
                Spacer(modifier = Modifier.height(4.dp))
                Text(
                    text = "这是第${index+1}个列表项的描述内容",
                    fontSize = 14.sp,
                    color = Color.Gray
                )
            }
        }
    }

    // 侧边滑动指示器
    Box(
        modifier = Modifier
            .width(4.dp)
            .height(indicatorHeight.dp)
            .offset(x = 0.dp, y = indicatorOffset.dp)
            .background(Color.Blue, shape = RoundedCornerShape(2.dp))
            .padding(start = 8.dp)
    )
}

关键细节说明 #

• onGloballyPositioned：监听每个列表项的布局完成事件，获取其在父容器中的位置与尺寸，为指示器的定位提供数据支撑。
• 动画状态animateIntAsState：通过动画过渡实现指示器偏移和高度的平滑变化，避免生硬跳转，提升交互体验。
• Box嵌套布局：将指示器与LazyColumn置于同一Box下，确保指示器能覆盖在列表的指定位置（示例中为左侧）。

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