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

        }
    }

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

感谢您的帮助

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

现在谈谈如何获取文本的宽度：警告：我认为这不是解决问题的方法，但我找不到更好的自动取款机。

首先，我创建了一个 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 上的密度问题并在桌面和 Android

上进行了测试

Answer 2

我有同样的要求，想出了一个更简单的解决方案。通过在选项卡和指示器上放置相同的水平填充，指示器与选项卡的内容对齐：

ScrollableTabRow(selectedTabIndex = tabIndex,
    indicator = { tabPositions ->
        Box(
            Modifier
                .tabIndicatorOffset(tabPositions[tabIndex])
                .height(TabRowDefaults.IndicatorHeight)
                .padding(end = 20.dp)
                .background(color = Color.White)
        )
    }) {
    Tab(modifier = Modifier.padding(end = 20.dp, bottom = 8.dp),
        selected = tabIndex == 0, onClick = { tabIndex = 0}) {
        Text(text = "Tab 1!")
    }
    Tab(modifier = Modifier.padding(end = 20.dp, bottom = 8.dp),
        selected = tabIndex == 1, onClick = { tabIndex = 1}) {
        Text(text = "Tab 2!")
    }
}

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

ScrollableTabRow indicator width to match text inside Tab

android

android-jetpack

android-jetpack-compose