Compose 中的 Lists and grids

在 Jetpack Compose 中，列表（Lists）和网格（Grids）是常用的布局模式，用于显示项目列表或项目网格。这两种布局都是通过 LazyColumn 和 LazyVerticalGrid（或 LazyRow 和 LazyHorizontalGrid）来实现的。

列表（Lists）

列表布局通常用于垂直显示项目列表，例如聊天记录、商品列表等。

示例代码

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun ListExample(items: List<String>) {
    LazyColumn {
        items(items) { item ->
            Text(text = item)
        }
    }
}

@Preview
@Composable
fun ListPreview() {
    val items = listOf("Item 1", "Item 2", "Item 3")
    ListExample(items)
}

网格（Grids）

网格布局用于在水平和垂直方向上排列项目，通常用于显示图像网格、商品展示等。

示例代码

import androidx.compose.foundation.lazy.LazyVerticalGrid
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun GridExample(items: List<String>) {
    LazyVerticalGrid(cells = GridCells.Fixed(2)) {
        items(items) { item ->
            Text(text = item)
        }
    }
}

@Preview
@Composable
fun GridPreview() {
    val items = listOf("Item 1", "Item 2", "Item 3", "Item 4", "Item 5")
    GridExample(items)
}

解释

1. LazyColumn 和 LazyVerticalGrid:

   • LazyColumn 用于垂直显示项目列表，而 LazyVerticalGrid 用于在垂直方向上显示项目网格。
   • items 函数用于迭代数据列表，并为每个项目创建相应的 Composable。

2. 数据:

   • 为了演示，这里创建了一个简单的字符串列表作为数据源，你可以将其替换为自己的数据列表。

自定义布局

你可以使用不同的参数来自定义列表和网格的外观，例如设置列数、行数、项目间距等。使用适当的参数可以实现各种布局需求。

LazyVerticalGrid(
    cells = GridCells.Adaptive(minSize = 128.dp),
    contentPadding = PaddingValues(16.dp),
    content = { items(items) { item -> /* Composable content */ } }
)

通过上述示例和解释，你可以使用 Jetpack Compose 中的列表和网格来创建各种类型的布局，并根据需求进行自定义。