Jetpack Compose中修改选中Tab底部线条颜色的技术问询

你当前的代码里，indicator的实现只是返回了红色背景的Modifier，但没有根据选中Tab的位置来定位指示器，所以无法正确显示在选中Tab的底部。要实现选中Tab底部红色线条，需要根据选中的Tab位置来绘制指示器：

修正后的完整代码 #

var selectedTab by remember { mutableIntStateOf(0) }

Column(modifier = Modifier.fillMaxSize()) {
    ScrollableTabRow(
        modifier = Modifier.fillMaxWidth(),
        selectedTabIndex = selectedTab,
        edgePadding = 0.dp,
        // 修正指示器实现
        indicator = { tabPositions: List<TabPosition> ->
            val selectedTabPosition = tabPositions[selectedTab]
            Modifier
                .offset(x = selectedTabPosition.left)
                .width(selectedTabPosition.width)
                .height(2.dp) // 线条高度，可根据需求调整
                .background(Color.Red)
        },
        tabs = {
            tabs.forEachIndexed { index, title ->
                Tab(
                    text = { Text(text = title) },
                    selected = selectedTab == index,
                    onClick = { selectedTab = index },
                )
            }
        }
    )

    TabContent(
        tabTitle = tabs[selectedTab],
        book = books
    )
}

关键说明 #

• 首先通过selectedTabIndex获取对应选中Tab的TabPosition，这个对象包含了Tab的位置和宽度信息
• 使用Modifier.offset(x = selectedTabPosition.left)将指示器定位到选中Tab的左侧位置
• 用width(selectedTabPosition.width)让指示器宽度和Tab一致
• 设置height来控制底部线条的粗细，最后用background(Color.Red)设置红色背景

这样就能实现选中Tab底部显示红色线条的效果了。

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