如何在Jetpack Compose Material3中实现弧形Tab指示器？

要实现Material3官网所示的弧形Tab指示器，你需要为TabRow指定自定义的indicator参数，替换默认的线条样式。以下是修改后的完整代码：

TabRow(
    selectedTabIndex = periodIndex,
    indicator = { tabPositions ->
        TabRowDefaults.PrimaryTabIndicator(
            Modifier.tabIndicatorOffset(tabPositions[periodIndex]),
            color = MaterialTheme.colorScheme.primary,
            shape = MaterialTheme.shapes.small
        )
    }
) {
    periodLabels.forEachIndexed { index, title ->
        Tab(
            selected = periodIndex == index,
            onClick = { periodIndex = index },
            text = { 
                Text(
                    text = title,
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                    color = if (periodIndex == index) {
                        MaterialTheme.colorScheme.primary
                    } else {
                        MaterialTheme.colorScheme.onSurfaceVariant
                    }
                ) 
            }
        )
    }
}

关键说明： #

• TabRowDefaults.PrimaryTabIndicator是Material3原生提供的弧形指示器组件，默认带圆角，与官网设计匹配。
• Modifier.tabIndicatorOffset(tabPositions[periodIndex])用于让指示器跟随选中Tab的位置动态偏移。
• 可通过shape参数调整圆角大小，比如改用MaterialTheme.shapes.medium能获得更明显的弧形效果。
• 调整Tab文本颜色：选中时使用主题主色，未选中时使用onSurfaceVariant，更贴合M3的设计规范。

请确保项目已引入最新版本的Material3依赖，避免因版本过低导致样式异常。

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