Jetpack compose Tab 切换 列表滚动回到顶部问题

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

            }
        }
    )
}

你可能感兴趣的:(Jetpack compose Tab 切换 列表滚动回到顶部问题)