Android Material Compose：ScrollableTabRow未选中标签阴影如何去除

问题描述 #

使用Material Compose 1.3.1版本的ScrollableTabRow与Tab组件时，未选中的标签下方出现了阴影，需要去除该阴影。相关实现代码如下：

@Composable
fun ScrollableTabView(currentSelectedTabIndex: Int, titles: List<String>, onClick: (Int) -> Unit) {
    ScrollableTabRow(
        selectedTabIndex = currentSelectedTabIndex,
        backgroundColor = MyColors.TabColor,
        contentColor = MaterialTheme.colors.primary,
        edgePadding = 0.dp
    ) {
        titles.forEachIndexed { index, title ->
            Tab(text = {
                Text(
                    title,
                    style = MyTypography.tabStyle,
                    fontWeight = if (currentSelectedTabIndex == index) FontWeight.Bold else FontWeight.Normal
                )
            },
                selected = currentSelectedTabIndex == index,
                selectedContentColor = MaterialTheme.colors.primary,
                unselectedContentColor = MyColors.lightText,
                onClick = {
                    onClick(index)
                })
        }
    }
}

@Preview
@Composable
fun ScrollableTabView() {
    MaterialTheme {
        ScrollableTabView(currentSelectedTabIndex = 0, titles = listOf("Tab 1","Tab 2","Tab 3")) {}
    }
}

解决方案 #

这个阴影是Tab组件默认未选中状态下的指示器效果，可通过以下两种方式去除：

方法一：给单个Tab设置空指示器 #

直接在Tab组件中显式设置indicator参数为一个空的Composable函数，取消未选中标签的指示器（阴影）：

Tab(
    text = {
        Text(
            title,
            style = MyTypography.tabStyle,
            fontWeight = if (currentSelectedTabIndex == index) FontWeight.Bold else FontWeight.Normal
        )
    },
    selected = currentSelectedTabIndex == index,
    selectedContentColor = MaterialTheme.colors.primary,
    unselectedContentColor = MyColors.lightText,
    onClick = { onClick(index) },
    // 空指示器，消除未选中标签的阴影
    indicator = {}
)

方法二：在ScrollableTabRow中统一控制指示器 #

如果需要统一管理所有标签的指示器样式，可在ScrollableTabRow中自定义indicator，仅为选中的标签渲染指示器：

ScrollableTabRow(
    selectedTabIndex = currentSelectedTabIndex,
    backgroundColor = MyColors.TabColor,
    contentColor = MaterialTheme.colors.primary,
    edgePadding = 0.dp,
    // 仅为选中标签渲染指示器
    indicator = { tabPositions ->
        if (currentSelectedTabIndex < tabPositions.size) {
            TabRowDefaults.Indicator(
                modifier = Modifier.tabIndicatorOffset(tabPositions[currentSelectedTabIndex]),
                color = MaterialTheme.colors.primary // 选中标签的指示器颜色
            )
        }
    }
) {
    // 原Tab循环代码保持不变
}

内容的提问来源于stack exchange，提问作者SURYA S R