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