在 android Jetpack Compose 中使用 Horizontal Pager 单击选项卡时,它会跳转到最后一个选项卡
While clicking on the tab with HorizontalPager in android Jetpack Compse, it jumps to the last tab
在 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")
}
问题存在于 Kotlin 版本 1.5.31 和 compose 版本 1.0.5 升级到最新的 Kotlin 版本 1.6.10 相对升级compose版本,bug修复
在 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")
}
问题存在于 Kotlin 版本 1.5.31 和 compose 版本 1.0.5 升级到最新的 Kotlin 版本 1.6.10 相对升级compose版本,bug修复