两个compose LazyColumn滚动同步联动

最新推荐文章于 2024-01-06 17:59:35 发布

IT_Studio

最新推荐文章于 2024-01-06 17:59:35 发布

阅读量530

点赞数

文章标签： android

本文链接：https://blog.csdn.net/IT_Studio/article/details/131536242

版权

文章描述了一个在JetpackCompose中创建可上下左右滑动的列表的需求，其中表头需要固定。通过使用两个LazyColumn和LazyRow以及rememberLazyListState，实现了列表的滚动同步，并给出了相应的代码示例。

摘要由CSDN通过智能技术生成

有个需求是列表数据比较多，因此列表需要实现上下左右滑动，并且表头固定。也就是第一列和第一行要固定，以方便用户对齐查看。

在View体系下实现是将list滑动数据通过接口发给表头联动，但在compose下如何联动呢。

查找发现这里也有这样的需求Jetpack compose 如何让两个惰性列一起滚动答案 - 爱码网 (likecs.com)

于是在

找到了答案 android - Scroll Two Lazy Scrollers Together - Stack Overflow

试试可以实现，nice，代码如下：

@Composable
    fun BrokenChainScreen(
        viewModel: BrokenChainViewModel = hiltViewModel(),
    ) {
        val context = LocalContext.current
        val stateRowX = rememberLazyListState() // State for the first Row, X
        val stateRowY = rememberLazyListState() // State for the second Row, Y
        val datas = mutableListOf(
            "原始数据"，"原始数据"，"原始数据"
        )
        Column(
            Modifier
                .fillMaxWidth()
                .padding(start = 0.dp, top = 10.dp, end = 0.dp, bottom = 0.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.SpaceBetween
        ) {
            Row(
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier
                    .weight(1f)
                    .padding(start = 0.dp, top = 4.dp, end = 0.dp, bottom = 0.dp)
            ) {
                Column(
                    Modifier
                        .padding(start = 0.dp, top = 0.dp, end = 0.dp, bottom = 0.dp),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.SpaceBetween
                ) {
                    Text(text = "序号")
                    LazyColumn(modifier = Modifier.weight(1f),state = stateRowY){
                        items(40){
                            Text(text = it.toString())
                        }
                    }
                }
                Column(
                    Modifier
                        .fillMaxWidth()
                        .padding(start = 0.dp, top = 0.dp, end = 0.dp, bottom = 0.dp),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.SpaceBetween
                ) {
                    LazyRow(modifier = Modifier.weight(1f)){
                        item {
                            Column() {
                                Row(
                                    verticalAlignment = Alignment.CenterVertically,
                                    modifier = Modifier
                                        .padding(start = 0.dp, top = 0.dp, end = 0.dp, bottom = 0.dp)
                                ) {

                                    Text(text = "类型")
                                    Text(text = "长度")
                                    Text(text = "序号")
                                    Text(text = "类型")
                                    Text(text = "长度")
                                    
                                }
                                LazyColumn(state = stateRowX) {
                                    items(datas) {
                                        Row(
                                            verticalAlignment = Alignment.CenterVertically,
                                            modifier = Modifier
                                                .clickable {

                                                }
                                                .padding(
                                                    start = 4.dp,
                                                    top = 6.dp,
                                                    end = 0.dp,
                                                    bottom = 0.dp
                                                )
                                        ) {
                                            Icon(
                                                imageVector = Icons.Outlined.RadioButtonChecked,
                                                contentDescription = ""
                                            )
                                            Text(
                                                text = it,
                                            )
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            Row(
                Modifier
                    .fillMaxWidth()
                    .padding(start = 0.dp, top = 0.dp, end = 0.dp, bottom = 0.dp),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceEvenly
            ) {
                Column(
                    modifier = Modifier
                        .weight(1f)
                        .clickable {

                        }
                        .border(1.dp, Color.Yellow, RoundedCornerShape(4.dp))
                        .background(Color.Gray, shape = RoundedCornerShape(4.dp))
                        .padding(start = 0.dp, top = 16.dp, end = 0.dp, bottom = 16.dp),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Text(text = "增加")
                }
                Column(
                    Modifier
                        .weight(1f)
                        .clickable {

                        }
                        .padding(start = 1.dp, top = 0.dp, end = 0.dp, bottom = 0.dp)
                        .border(1.dp, Color.Yellow, RoundedCornerShape(4.dp))
                        .background(Color.Gray, shape = RoundedCornerShape(4.dp))
                        .padding(start = 0.dp, top = 16.dp, end = 0.dp, bottom = 16.dp),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Text(text = "编辑")
                }
                Column(
                    Modifier
                        .weight(1f)
                        .clickable {

                        }
                        .padding(start = 1.dp, top = 0.dp, end = 0.dp, bottom = 0.dp)
                        .border(1.dp, Color.Yellow, RoundedCornerShape(4.dp))
                        .background(Color.Gray, shape = RoundedCornerShape(4.dp))
                        .padding(start = 0.dp, top = 16.dp, end = 0.dp, bottom = 16.dp),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Text(text = "删除")
                }
                Column(
                    Modifier
                        .weight(1f)
                        .clickable {

                        }
                        .padding(start = 1.dp, top = 0.dp, end = 0.dp, bottom = 0.dp)
                        .border(1.dp, Color.Yellow, RoundedCornerShape(4.dp))
                        .background(Color.Gray, shape = RoundedCornerShape(4.dp))
                        .padding(start = 0.dp, top = 16.dp, end = 0.dp, bottom = 16.dp),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Text(text = "确定")
                }
            }
        }

        //This might seem crazy
        LaunchedEffect(stateRowX.firstVisibleItemScrollOffset) {
            stateRowY.scrollToItem(
                stateRowX.firstVisibleItemIndex,
                stateRowX.firstVisibleItemScrollOffset
            )
        }

        LaunchedEffect(stateRowY.firstVisibleItemScrollOffset) {
            stateRowX.scrollToItem(
                stateRowY.firstVisibleItemIndex,
                stateRowY.firstVisibleItemScrollOffset
            )
        }

    }