Android Jetpack Compose：移除TabRow底部阴影并添加选中Tab内边距

1. 移除TabRow底部阴影 #

TabRow在Material 1.4.3版本中默认带有4.dp的elevation（ elevation是阴影的来源），只需显式设置elevation = 0.dp即可消除底部细微阴影。

2. 为选中Tab添加2dp内边距 #

在Tab的modifier中根据选中状态动态添加内边距，注意调整modifier顺序：先设置padding，再设置background，这样背景会包裹内边距区域，保证圆角样式正常显示。

修改后的完整代码 #

val pagerState = rememberPagerState()
val pages = listOf("ABC", "DEF")
TabRow(
    selectedTabIndex = pagerState.currentPage,
    backgroundColor = Color(0xFFDDDDDD),
    // 新增：设置elevation为0移除阴影
    elevation = 0.dp,
    modifier = Modifier
        .background(Color.White)
        .height(32.dp)
        .width(150.dp)
        .clip(RoundedCornerShape(24.dp)),
    indicator = { tabPositions ->
        TabRowDefaults.Indicator(
            Modifier
                .pagerTabIndicatorOffset(pagerState, tabPositions)
                .width(0.dp)
                .height(0.dp)
        )
    }
) {
    pages.forEachIndexed { index, title ->
        val color = remember {
            Animatable(Color(0xFFDDDDDD))
        }
        val isSelected = pagerState.currentPage == index
        LaunchedEffect(isSelected) {
            color.animateTo(
                if (isSelected) {
                    Color.Cyan
                } else {
                    Color(0xFFDDDDDD)
                }
            )
        }
        Tab(
            text = {
                Text(
                    text = title,
                    style = buttonXSmallStyle.copy(
                        color = if (isSelected) {
                            Color.White
                        } else {
                            Color.DarkGray
                        }
                    )
                )
            },
            selected = isSelected,
            // 修改：根据选中状态添加内边距，保证顺序正确
            modifier = Modifier.run {
                if (isSelected) padding(2.dp) else this
            }.background(
                color = color.value,
                shape = RoundedCornerShape(24.dp)
            ),
            onClick = {
                coroutineScope.launch {
                    pagerState.animateScrollToPage(index)
                }
            }
        )
    }
}

关键修改说明 #

• 阴影消除：TabRow的默认elevation会生成阴影，设为0.dp后完全移除阴影效果。
• 内边距处理：动态添加的padding放在background之前，确保背景区域包含内边距，避免圆角与内容错位。

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