While clicking on the tab with HorizontalPager in android Jetpack Compse, it jumps to the last tab I add the code to see the problem visible
This is my code ->
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() })
}
}
}
And this is where it is used ->
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")
}
}
If the LoadScreen() function just loads a simple text, it works well but when you add more items, while clicking it jumps to the last tab
e.g. with this LoadScreen() works fine ->
@Composable
private fun LoadScreen() {
Column(
modifier = Modifier
.fillMaxSize()
.verticalScroll(rememberScrollState())
.padding(16.dp),
verticalArrangement = Arrangement.spacedBy(16.dp),
) {
Text(text = "One line")
}