Kotlin Jetpack compose 可滚动表格

发布于05月07日

我需要一个可以垂直和水平滚动的组件.

以下是我迄今为止所做的:

@Composable
fun Screen() {
    val scope = rememberCoroutineScope()
    val scrollOffset = remember {
        mutableStateOf(value = 0F)
    }
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(space = 16.dp)
    ) {
        items(10) {
            SimpleRow(
                onScrollOffsetChange = {
                    scrollOffset.value = it
                }
            )
        }
    }
}

@Composable
private fun SimpleRow(
    onScrollOffsetChange: (Float) -> Unit,
) {
    val lazyRowState = rememberLazyListState()
    LazyRow(
        modifier = Modifier.fillMaxWidth(),
        state = lazyRowState
    ) {
        item {
            Text(
                text = "firstText"
            )
        }
        for (i in 1..30) {
            item {
                Text(text = "qwerty")
            }
        }
    }
}

当这SimpleRow个中的任何一个被滚动时，我想把所有的SimpleRow个一起滚动.

我不知道我有多少个SimpleRow，因为它们来self 们的服务器.

有什么组合或技巧可以帮我吗？

推荐答案

可以在水平和垂直滚动的列中使用多行，如下所示:

@Composable
fun MainContent() {
    val scrollStateHorizontal = rememberScrollState()
    val scrollStateVertical = rememberScrollState()

  Column(
      modifier = Modifier
          .fillMaxSize()
          .verticalScroll(state = scrollStateVertical)
          .horizontalScroll(state = scrollStateHorizontal)
  ) {
      
      repeat(40){ c ->
          Row {
              repeat(40){ r ->
                  Item("col: $c | row: $r")
              }
          }
      }
      
  }
}

@Composable
fun Item(text: String) {
    Text(
        modifier = Modifier
            .padding(5.dp)
            .background(Color.Gray),
        text = text,
        color = Color.White
    )
}