Jetpack Compose 列表

IT乐手2024-04-11 17:11

延迟列表

系统会对所有列表项进行组合和布局，无论它们是否可见，因此如果您需要显示大量列表项（或长度未知的列表），则使用 $`Column`$ 等布局可能会导致性能问题。

Compose 提供了一组组件，这些组件只会对在组件视口中可见的列表项进行组合和布局。这些组件包括 $`LazyColumn`$ 和 $`LazyRow`$

$`item()`$ 用于添加单个列表项， $`items(Int)`$ 用于添加多个列表项：

ts 复制代码

LazyColumn(modifier = modifier.fillMaxWidth(), contentPadding = PaddingValues(top = 100.dp)) {
    // Add a single item
    item {
        Text(modifier = Modifier.fillMaxWidth().height(50.dp).background(color = Color.Black).padding(all = 15.dp),
            text = "First item",
            color = Color.White)
    }
    // Add 5 items
    items(5) { index ->
        Text(modifier = Modifier.fillMaxWidth().height(50.dp).background(color = Color.Blue).padding(all = 15.dp),
            text = "Item: $index",
            color = Color.White)
    }
    // Add another single item
    item {
        Text(modifier = Modifier.fillMaxWidth().height(50.dp).background(color = Color.Green).padding(all = 15.dp),
            text = "Last item")
    }
}

还有许多扩展函数可用于添加列表项的集合，例如 List。借助这些扩展函数，我们可以轻松迁移上述 $`Column`$ 示例

ts 复制代码

@Composable
private fun example2(modifier:Modifier = Modifier) {
    val messages = arrayListOf("Title1","Title2", "Title3", "Title4", "Title5",  "Title6",  "Title7",  "Title8")
    /**
     * import androidx.compose.foundation.lazy.items
     */
    LazyColumn(modifier = modifier, contentPadding = PaddingValues(top = 100.dp)) {
        items(messages) { message ->
            MessageRow(message)
        }
    }
}

@Composable
private fun MessageRow(message:String) {
    ElevatedCard(
        elevation = CardDefaults.cardElevation(
            defaultElevation = 6.dp
        ),
        modifier = Modifier
            .fillMaxWidth()
            .height(150.dp)
            .padding(start = 15.dp, end = 15.dp, top = 15.dp)
    ) {
        Text(
            text = message,
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}

上一篇 Jetpack Compose 分页器 Pager