在android Jetpack Compose中单击带有Horizontal Pager的选项卡时，它会跳转到最后一个选项卡答案

【问题标题】：While clicking on the tab with HorizontalPager in android Jetpack Compse, it jumps to the last tab在android Jetpack Compose中单击带有Horizontal Pager的选项卡时，它会跳转到最后一个选项卡
【发布时间】：2023-03-18 12:51:02
【问题描述】：

在 android Jetpack Compse 中使用 HorizontalPager 点击标签时， 会跳转到最后一个标签我添加代码以查看问题可见

这是我的代码 ->

data class TabPage(val title: String?, val icon: ImageVector? = null, var screen: (@Composable () -> Unit)? = null)

@OptIn(ExperimentalPagerApi::class)
@Composable
fun SwipeableTabLayout(
    modifier: Modifier = Modifier,
    tabPages: List<TabPage>
) {
    val pagerState = rememberPagerState()
    val scope = rememberCoroutineScope()
    Surface(color = Color.White) {
        Column {
            TabRow(selectedTabIndex = pagerState.currentPage) {
                tabPages.forEachIndexed { index, tabPage ->
                    Tab(
                        modifier = modifier,
                        selected = index == pagerState.currentPage,
                        onClick = { scope.launch { pagerState.animateScrollToPage(index) } },
                        text = tabPage.title?.let { title -> { Text(text = title) } },
                        icon = tabPage.icon?.let { icon -> { Icon(imageVector = icon, contentDescription = null) } }
                    )
                }
            }


            HorizontalPager(
                state = pagerState,
                count = tabPages.size,
                content = { page -> tabPages[page].screen?.invoke() })
        }
    }
}

这就是使用它的地方->

enum class SnackbarType(val value: String) {
    ERROR("Error"),
    WARNING("Warning"),
    SUCCESS("Success"),
    INFO("Info")
}

@Composable
fun CoreComponentsSnackbarScreen(onNavigate: (Destination) -> Unit) {
    val tabPages = listOf(
        TabPage(title = SnackbarType.ERROR.value, screen = { LoadScreen() }),
        TabPage(title = SnackbarType.WARNING.value, screen = { LoadScreen() }),
        TabPage(title = SnackbarType.SUCCESS.value, screen = { LoadScreen() }),
        TabPage(title = SnackbarType.INFO.value, screen = { LoadScreen() })
    )

    Scaffold(
        content = {
            SwipeableTabLayout(tabPages = tabPages, scrollable = true)
        }
    )
}

@Composable
private fun LoadScreen() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
            .padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp),
    ) {

        Text(text = "One line")

        Text(text = "Two lines")

        Text(text = "One line with action")


        Text(text = "Two lines with action")
    }
}

如果 LoadScreen() 函数只是加载一个简单的文本，它工作得很好，但是当你添加更多项目时，点击它会跳转到最后一个选项卡

例如使用此 LoadScreen() 可以正常工作->

@Composable
private fun LoadScreen() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
            .padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp),
    ) {

        Text(text = "One line")

}

【问题讨论】：

您的代码太大，仅通过查看就无法理解问题，而且它根本无法运行-我找不到的第一件事是LoadSnackbar，但您也使用了R.string. 的很多东西和自定义颜色，我也没有。您问题中的代码越多，即使所有元素都存在，尝试运行它的人就越少。此外，您通常可以自己找到问题，只要您在到达minimally reproducible example 的过程中删除不相关的代码部分。
@PhilipDukhov 很公平，已更新
干得好！您使用的是什么 Compose/Accompanist 版本？对我来说似乎工作正常，我相应地使用 1.1.0 和 0.23.0 。如果您可以在与我相同的最新版本上重现该问题，请清楚地描述您的重现步骤，完美的 gif/video

标签： android kotlin tabs android-viewpager android-jetpack-compose

【解决方案1】：

Kotlin 版本 1.5.31 和 compose 版本 1.0.5 中存在问题，升级到最新的 Kotlin 版本 1.6.10 和compose版本相对升级，bug修复。

【讨论】：