JetPack组成多个LazyColumn同时一起滚动

Question

我想要多个All LazyColumn同时滚动

我不能使用LazyHorizontalGrid或LazyVerticalGrid，因为内部布局两种布局是不同的。我如何在多个LazyColumn共享滚动?

@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

单个LazyColumn，其中惰性列中的每个条目是一行5项，看起来适合您想要的

Answer 3

我更新了Shyak Das的代码，使两个卷轴同步

将此添加到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