Jetpack 撰写可滚动 table

Question

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

这是我目前所做的：

@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，因为它们来自我们的服务器。

是否有任何类型的可组合项或技巧可以为我做到这一点？

Answer 1

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

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

Jetpack 撰写可滚动 table

Jetpack compose scrollable table

kotlin

android-jetpack-compose