Jetpack Compose：如何将列表项包装在卡片中

Question

我有一个屏幕，我需要在其中显示一个标题和一个包裹在卡片视图中的项目列表。 整个屏幕必须是可滚动的（如下图所示）。

我知道如何使用可滚动的列来做到这一点，但我希望能够使用LazyColumn （因为由于视图的复杂性，每个列表项都有自己的 ViewModel，我认为 LazyColumn 会更节省资源）。 对于标题，我可以使用item ，对于列表，我可以使用items 。 下面是我试过的代码：

@Composable
fun Screen(
  items: List<String>
) {
  Column(
    Modifier.fillMaxSize()
  ) {
    TopAppBar(title = { Text(text = "My Activity") })

    LazyColumn {

      // Header
      item {
        Text("Title", Modifier.padding(32.dp))
      }

      // I cannot use Box in this way here
      Box(Modifier.padding(32.dp)) {
        Card {
          items(items.size) {
            Text("Item $it")
          }
        }
      }
    }
  }
}

该代码的问题在于我无法将列表项包装在卡片视图中，因为Card不是LazyListScope 。 使用 LazyColumn，如何将列表项包装在卡片中？

Answer 1

你可以定义你的“卡”作为一个单一的item包含嵌套的items 。

items是LazyListScope一部分，您需要使用 kotlin 明确this例如this@LazyColumn

@Composable
fun Screen(
    items: List<String>
)  {
    Column(
        Modifier.fillMaxSize()
    ) {
        TopAppBar(title = { Text(text = "My Activity") })
        LazyColumn( Modifier.fillMaxSize()) {

            // Header
            item {
                Text("Title", Modifier.padding(32.dp))
            }

            // Single item
            item {
                // Your Box list here
                Box(Modifier.padding(32.dp)) {
                    Card {
                        this@LazyColumn.items(items.size) {
                            Text("Item $it")
                        }
                    }
                }
            }
        }
    }
}