ScrollableTabRow 指示符宽度以匹配 Tab 内的文本

如何解决ScrollableTabRow 指示符宽度以匹配 Tab 内的文本

我的问题是我需要一个制表符来与其上方的文本完全匹配（来自设计）：

然而，我设法做的就是得到这样的东西：

我的代码：

 ScrollableTabRow(
            selectedTabIndex = selectedSeason,backgroundColor = Color.White,edgePadding = 0.dp,modifier = Modifier
                .padding(vertical = 24.dp)
                .height(40.dp),indicator = { tabPositions ->
                TabDefaults.Indicator(
                    color = Color.Red,height = 4.dp,modifier = Modifier
                        .tabIndicatorOffset(tabPositions[selectedSeason])
                )
            }
        ) {
            item.seasonList().forEachIndexed { index,contentItem ->
                Tab(
                    modifier = Modifier.padding(bottom = 10.dp),selected = index == selectedSeason,onClick = { selectedSeason = index }
                )
                {
                    Text(
                        "Season " + contentItem.seasonNumber(),color = Color.Black,style = styles.seasonBarTextStyle(index == selectedSeason)
                    )
                }
            }

        }
    }

还有一个额外的问题，我的这个屏幕的代码在惰性列中，现在我需要让这个标签行表现得有点像一个粘性标题（当它到达顶部时，屏幕停止滚动，但我仍然可以滚动其中的项目）

感谢您的帮助

解决方法

查看提供的修饰符，它在内部计算宽度值。如果您自己将修改器更改为下面的代码，您可以提供宽度值。

fun Modifier.ownTabIndicatorOffset(
    currentTabPosition: TabPosition,currentTabWidth: Dp = currentTabPosition.width
): Modifier = composed(
    inspectorInfo = debugInspectorInfo {
        name = "tabIndicatorOffset"
        value = currentTabPosition
    }
) {
    val indicatorOffset by animateAsState(
        targetValue = currentTabPosition.left,animationSpec = tween(durationMillis = 250,easing = FastOutSlowInEasing)
    )
    fillMaxWidth()
        .wrapContentSize(Alignment.BottomStart)
        .offset(x = indicatorOffset + ((currentTabPosition.width - currentTabWidth) / 2))
        .preferredWidth(currentTabWidth)
}

现在是如何获取文本宽度的重点： 警告：我认为这不是办法，但我想不出更好的自动取款机。

首先，我创建了一个 Composable 来为我提供其内容的宽度。

@Composable
fun MeasureWidthOf(setWidth: (Int) -> Unit,content: @Composable () -> Unit) {
    Layout(
        content = content
    ) { list: List<Measurable>,constraints: Constraints ->
        check(list.size == 1)
        val placeable = list.last().measure(constraints)
        layout(
            width = placeable.width.also(setWidth),height = placeable.height
        ) {
            placeable.placeRelative(x = 0,y = 0)
        }
    }
}

现在我可以在你的例子中使用它（简化）：

// Needed for Android
fun Float.asPxtoDP(density: Float): Dp {
    return (this / (density)).dp
}

fun main(args: Array<String>) {
    Window(size = IntSize(600,800)) {
        val (selectedSeason,setSelectedSeason) = remember { mutableStateOf(0) }
        val seasonsList = mutableListOf(2020,2021,2022)
        val textWidth = remember { mutableStateListOf(0,0) }
        // Android
        val density = AmbientDensity.current.density
        ScrollableTabRow(
            selectedTabIndex = selectedSeason,backgroundColor = Color.White,edgePadding = 0.dp,modifier = Modifier
                .padding(vertical = 24.dp)
                .height(40.dp),indicator = { tabPositions ->
                TabDefaults.Indicator(
                    color = Color.Red,height = 4.dp,modifier = Modifier
                        .ownTabIndicatorOffset(
                            currentTabPosition = tabPositions[selectedSeason],// Android:
                            currentTabWidth = textWidth[selectedSeason].asPxtoDP(density)
                           // Desktop:
                           currentTabWidth = textWidth[selectedSeason].dp
                        )
                )
            }
        ) {
            seasonsList.forEachIndexed { index,contentItem ->
                Tab(
                    modifier = Modifier.padding(bottom = 10.dp),selected = index == selectedSeason,onClick = { setSelectedSeason(index) }
                )
                {
                    val text = @Composable {
                        Text(
                            text = "Season $contentItem",color = Color.Black,textAlign = TextAlign.Center
                        )
                    }
                    if (index == selectedSeason) {
                        MeasureWidthOf(setWidth = { textWidth[index] = it }) {
                            text()
                        }
                    } else {
                        text()
                    }
                }
            }
        }
    }
}

编辑 (05.01.2021)：简化修饰符代码

编辑 (09.01.2021)：修复了安卓上的密度问题，并在桌面和安卓上进行了测试