在 android Jetpack Compose 中使用 Horizontal Pager 单击选项卡时，它会跳转到最后一个选项卡

Question

在 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")

}

Answer 1

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

在 android Jetpack Compose 中使用 Horizontal Pager 单击选项卡时，它会跳转到最后一个选项卡

While clicking on the tab with HorizontalPager in android Jetpack Compse, it jumps to the last tab

android

kotlin

tabs

android-viewpager

android-jetpack-compose

在 android Jetpack Compose 中使用 Horizo​​ntal Pager 单击选项卡时，它会跳转到最后一个选项卡

While clicking on the tab with HorizontalPager in android Jetpack Compse, it jumps to the last tab

android

kotlin

tabs

android-viewpager

android-jetpack-compose

在 android Jetpack Compose 中使用 Horizontal Pager 单击选项卡时，它会跳转到最后一个选项卡