Jetpack Compose TabRow指示器在RTL语言环境下出现异常

问题复现 #

使用默认PrimaryTabRow实现标签栏时，LTR语言环境正常，但切换到RTL（如阿拉伯语、希伯来语）时，选中标签的指示器位置偏移或显示异常。

可行解决方案 #

1. 自定义适配RTL的指示器

默认的TabRow指示器未完全适配RTL布局方向，可通过自定义指示器修复：

PrimaryTabRow(
    selectedTabIndex = state,
    indicator = { tabPositions ->
        val currentTabPosition = tabPositions[state]
        // 获取当前布局方向
        val layoutDirection = LocalLayoutDirection.current
        Box(
            modifier = Modifier
                .tabIndicatorOffset(currentTabPosition)
                // 根据RTL/LTR动态调整指示器参数
                .then(
                    if (layoutDirection == LayoutDirection.Rtl) {
                        Modifier.fillMaxHeight()
                            .offset(x = currentTabPosition.width * (-1))
                    } else {
                        Modifier.fillMaxHeight()
                    }
                )
                .background(MaterialTheme.colorScheme.primary, shape = RoundedCornerShape(4.dp))
                .height(3.dp)
        )
    }
) {
    list.forEachIndexed { index, title ->
        Tab(
            selected = state == index,
            onClick = { state = index },
            text = { Text(text = title, maxLines = 2, overflow = TextOverflow.Ellipsis) }
        )
    }
}

核心是通过LocalLayoutDirection判断当前布局方向，修正tabIndicatorOffset在RTL下的偏移计算逻辑，确保指示器与选中标签对齐。

2. 升级Compose Material版本

部分旧版本（如Compose Material 1.5.x及以下）存在RTL布局下TabRow指示器的已知bug，升级至1.6.0及以上稳定版可直接修复官方组件的适配问题。

3. 临时应急方案（不推荐长期使用）

若暂时无法升级或自定义指示器，可强制TabRow使用LTR布局，但会破坏整体RTL体验，仅作为临时过渡：

CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Ltr) {
    PrimaryTabRow(selectedTabIndex = state) {
        // 原有Tab逻辑
    }
}

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