当用Android Jetpack Compse中的HorizontalPager点击标签时，它会跳到最后一个标签 [英] While clicking on the tab with HorizontalPager in android Jetpack Compse, it jumps to the last tab

问题描述

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

}

推荐答案

版本1.5.31和编写版本1.0.5升级到最新的kotlin版本1.6.10相对升级的编写版本，已修复错误。

这篇关于当用Android Jetpack Compse中的HorizontalPager点击标签时，它会跳到最后一个标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！