Jetpack compose 实现多个tab页面, 每个Tab对应一个列表时, 切换时列表会自动滚动到顶部, 解决的办法很简单, 执行要设置它的state就可以了,代码如下:
@Preview(showBackground = false, backgroundColor = 0xffffff)
@Composable
fun DefaultPreview() {
// 记住tab页状态
val state = remember { mutableStateOf(0) }
val titles = listOf("Tab1", "Tab2", "Tab3")
val listData = (0..119).toList()
Scaffold(
content = {
Column(modifier = Modifier.fillMaxSize()) {
// 记住列表状态, 只需将这个设置给 LazyColumn 的 state 即可
val listState0 = rememberLazyListState()
val listState1 = rememberLazyListState()
val listState2 = rememberLazyListState()
UserInfo()
// 滚动table
TabRow(selectedTabIndex = state.value, tabs = {
titles.forEachIndexed { index, s ->
Tab(selected = index == state.value,
onClick = { state.value = index },
text = { Text(text = s) })
}
})
Box(modifier = Modifier.fillMaxWidth()) {
when (state.value) {
0 -> {
LazyColumn(
modifier = Modifier.fillMaxWidth(),
state = listState0,
content = {
items(listData) {
Box(modifier = Modifier.height(100.dp)) {
Text(text = "Item$it")
}
}
})
}
1 -> {
LazyColumn(
modifier = Modifier.fillMaxWidth(),
state = listState1,
content = {
items(listData) {
Box(modifier = Modifier.height(100.dp)) {
Text(text = "Item$it")
}
}
})
}
else -> {
LazyColumn(
modifier = Modifier.fillMaxWidth(),
state = listState2,
content = {
items(listData) {
Box(modifier = Modifier.height(100.dp)) {
Text(text = "Item$it")
}
}
})
}
}
}
}
}
)
}