ScrollableTabRow指示器遮挡选中标签文本问题求助

已知ScrollableTabRow组件包含Indicator参数，我尝试用该参数为选中标签绘制渐变背景，但实际效果与预期不符：由于ScrollableTabRow会在最后一步绘制指示器，导致选中标签的文本被完全遮挡，无法显示。

我不想通过复制整个ScrollableTabRow组件修改绘制顺序来解决问题，希望得到更优雅的实现方案。

预期效果：选中标签带有渐变背景，文本清晰显示在背景之上
实际效果：渐变背景完全覆盖选中标签的文本，无法看到文字

原代码 #

enum class TrackScreenTab(val text: UiText, val index: Int) {
    MUSIC(
        index = 0,
        text = UiText.StringResource(R.string.music))
    ,
    COMMENTS(
        index = 1,
        text = UiText.StringResource(R.string.comments))
    ,
    SIMILAR_MUSICS(
        index = 2,
        text = UiText.StringResource(R.string.simular_musics)
    )
}

@Composable
fun TrackTabRow(
    modifier: Modifier = Modifier,
    tabs: List<TrackScreenTab>,
    selectedTab: TrackScreenTab = TrackScreenTab.MUSIC,
    onTabSelected: (selectedTab: TrackScreenTab) -> Unit
) {
    ScrollableTabRow(
        selectedTabIndex = selectedTab.index,
        modifier = modifier,
        edgePadding = 16.dp,
        tabs = {
            tabs.forEachIndexed { index, tab ->
                Tab(
                    selected = selectedTab.index == index,
                    onClick = remember { { onTabSelected(tab) } },
                    text = {
                        Text(
                            text = tab.text.asString(),
                            style = MaterialTheme.typography.bodyLarge.copy(fontWeight = FontWeight.Bold),
                        )
                    },
                    modifier = Modifier
                        .padding(end = 8.dp)
                        .height(height = 36.dp)
                )
            }
        },
        divider = {},
        indicator = { tabPositions: List<TabPosition> ->
            Box(
                Modifier
                    .tabIndicatorOffset(tabPositions[selectedTab.index])
                    .fillMaxWidth()
                    .height(36.dp)
                    .background(
                        brush = Brush.verticalGradient(
                            colors = listOf(
                                Color(0XFF00B2FF),
                                Color(0XFF00F0FF)
                            )
                        ),
                        shape = RoundedCornerShape(16.dp)
                    )
            )
        },
        containerColor = Color.Transparent,
        contentColor = Color(0XFF9E9FB4)
    )
}

核心思路：放弃用Indicator实现选中背景，改为在Tab组件内部根据选中状态添加背景。因为ScrollableTabRow的绘制顺序是先渲染所有Tab内容，最后绘制Indicator，所以Indicator会覆盖在Tab文本之上；而Tab内部的背景会绘制在文本下方，不会遮挡文字。

修改后的代码：

@Composable
fun TrackTabRow(
    modifier: Modifier = Modifier,
    tabs: List<TrackScreenTab>,
    selectedTab: TrackScreenTab = TrackScreenTab.MUSIC,
    onTabSelected: (selectedTab: TrackScreenTab) -> Unit
) {
    ScrollableTabRow(
        selectedTabIndex = selectedTab.index,
        modifier = modifier,
        edgePadding = 16.dp,
        tabs = {
            tabs.forEachIndexed { index, tab ->
                val isSelected = selectedTab.index == index
                Tab(
                    selected = isSelected,
                    onClick = { onTabSelected(tab) },
                    text = {
                        Text(
                            text = tab.text.asString(),
                            style = MaterialTheme.typography.bodyLarge.copy(
                                fontWeight = FontWeight.Bold,
                                // 选中时设置对比色，提升文字可读性
                                color = if (isSelected) Color.White else Color(0XFF9E9FB4)
                            ),
                        )
                    },
                    modifier = Modifier
                        .padding(end = 8.dp)
                        .height(36.dp)
                        // 根据选中状态添加渐变背景
                        .run {
                            if (isSelected) {
                                background(
                                    brush = Brush.verticalGradient(
                                        colors = listOf(
                                            Color(0XFF00B2FF),
                                            Color(0XFF00F0FF)
                                        )
                                    ),
                                    shape = RoundedCornerShape(16.dp)
                                )
                            } else this
                        },
                    // 禁用默认选中样式，避免冲突
                    selectedContentColor = Color.Unspecified,
                    unselectedContentColor = Color.Unspecified
                )
            }
        },
        divider = {},
        // 无需自定义Indicator，设为空实现
        indicator = {},
        containerColor = Color.Transparent,
        contentColor = Color(0XFF9E9FB4)
    )
}

1. 给选中状态的文本设置白色，与渐变背景形成对比，提升可读性
2. 移除Tab的默认选中/未选中内容色，避免和自定义样式冲突
3. 简化onClick的写法，无需用remember包裹（若onTabSelected是上层传递的稳定lambda）

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