RTL 语言中的 Jetpack Compose TabRow 指示器故障

Question

我正在开发 Jetpack Compose 项目，并尝试创建带有选项卡的 TabRow，如下所示：

PrimaryTabRow(selectedTabIndex = state) {

            list.forEachIndexed { index, title ->

                Tab(

                    selected = state == index,

                    onClick = { state = index },

                    text = { Text(text = title, maxLines = 2, overflow = TextOverflow.Ellipsis) }

                )

            }

        }

此代码适用于从左到右 (LTR) 语言。但是，当我切换到从右到左 (RTL) 语言时，默认指示器会出现故障，如本视频所示。

有人遇到过这个问题或者有解决方法吗？

Answer 1

此问题已在 Google 问题跟踪器上报告：
#359245765 #361375808

这两个问题都已分配给 Android 团队中的一个人。您可以给问题加注星标以引起更多关注。

建议的解决方法是在检测到 RTL 布局时以编程方式旋转指示器。请尝试以下代码：

PrimaryTabRow(
    selectedTabIndex = selectedTabIndex,
    indicator = {
        TabRowDefaults.PrimaryIndicator(
            modifier = Modifier.run {
                if (LocalLayoutDirection.current == LayoutDirection.Rtl)
                    scale(-1f, 1f) //or rotate(180f)
                else
                    this
            }.tabIndicatorOffset(selectedTabIndex, true),
            width = Dp.Unspecified,
        )
    }
) {
    //...
}