JetPack同时组成多个懒惰的滚动

Question

我想同时使用多个懒惰的卷轴，

因为内部布局两个布局是不同的，所以我不能使用lazyhorizo​​ntalgrid或lazyverticalgrid。 我如何在多个懒惰的滚动中分享滚动？

@Composable
fun TableScreen2(list: List<Time>, cal: Calendar, df: DateFormat) {

    LazyRow(Modifier.fillMaxSize()) {
        item {
            LazyColumn(
                modifier = Modifier
                    .fillParentMaxHeight()
            ) {
                items(count = list.first().timeList.size / 2) {
                    Column(
                        modifier = Modifier
                            .width(60.dp)
                            .height(50.dp),
                        verticalArrangement = Arrangement.Top
                    ) {

                        Text(df.format(stateCal.time))
                        stateCal.add(Calendar.MINUTE, 30)

                    }
                }
            }
        }

        items(4) { listIndex ->
            LazyColumn(modifier = Modifier.fillParentMaxHeight()) {
                itemsIndexed(list[listIndex].timeList) { timeIndex, timeItem ->
                    Box(
                        modifier = Modifier
                            .height(30.dp)
                            .width(60.dp)
                            .background(Color.Gray),
                        contentAlignment = Alignment.Center
                    ) {
                        Text(text = "$timeIndex")
                    }
                }

            }
        }
    }
}

这是gif

Answer 1

我不知道您是否还需要帮助。

// Add the data set
val channels = ArrayList<String>()
val programs = mutableListOf<List<ArrayList<String>>>()
for (channel in 1..400) {
        channels.add("C $channel")
    }
    for (j in 1..400) {
        val arrayList = ArrayList<String>()
        for (i in 1..400) {
            arrayList.add("Program ${j}${i}")
        }
        programs.add(listOf(arrayList))
    }


@Composable
fun ChannelFilter() {
    LazyColumn(modifier = Modifier.fillMaxHeight()) {
        items(channels.size) { index ->
            Text(text = channels[index], modifier = Modifier.padding(30.dp))
        }
    }
}

@Composable
fun T1ProgramList() {
    Box(Modifier.horizontalScroll(rememberScrollState())) {
        LazyColumn(modifier = Modifier.fillMaxHeight()) {
            items(programs, { row -> row.hashCode() }) { row ->
                Row(modifier = Modifier.padding(vertical = 30.dp)) {
                    row.forEach { col ->
                        Text(text = "$col", modifier = Modifier.padding(horizontal = 16.dp))
                    }
                }
            }
        }
    }
}

@Composable
fun ChannelAndProgramLayout() {
    Row(modifier = Modifier.fillMaxSize()) {
        Column(modifier = Modifier.weight(1f)) {
            Text(
                text = "Channels",
                modifier = Modifier.padding(8.dp)
            )
            ChannelFilter()
        }
        Column(modifier = Modifier.weight(3f)) {
            Text(
                text = "T1 Programs",
                modifier = Modifier.padding(8.dp)
            )
            T1ProgramList()
        }
    }
}

Answer 2

一个懒惰的单个条目，懒惰列中的每个条目是5个项目的一行，看起来适合您想要的东西。

Answer 3

我将Shyak DAS的代码更新为2个卷轴以同步

将其添加到ChannelAndProgramlayout（）

val stateRowX = rememberLazyListState()
val stateRowY = rememberLazyListState()

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

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

，然后添加到Channelfilter（）

LazyColumn(modifier = Modifier.fillMaxHeight(), state = stateRowX) 

和T1Programlist（），

LazyColumn(modifier = Modifier.fillMaxHeight(), state = stateRowY)

请感谢Shyak das