android - ScrollableTabRow 指示器宽度以匹配 Tab 内的文本

Question

我的问题是我需要一个标签指示器来完全匹配它上面的文本(来自设计):

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

我的代码:

 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)
                    )
                }
            }

        }
    }

还有一个小问题，我的这个屏幕的代码在惰性列中，现在我需要让这个标签行表现得有点像一个粘性标题(当它到达顶部时，屏幕停止滚动，但我仍然可以滚动项目在里面)
谢谢你的帮助

Answer 1

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

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)
}

现在到了如何获取文本宽度的点:
警告:我认为这不是这样做的方法，但我想不出一个更好的 atm。
首先，我创建了一个 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, 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):修复了 android 上的密度问题，并在 Desktop 和 Android 上进行了测试