Material 3中ListItem对应的网格项等效组件是什么？

嘿，这个问题我太懂了！在Jetpack Compose的Material 3库中，确实没有官方直接提供和ListItem一一对应的GridItem组件——毕竟ListItem是专门为线性列表设计的，默认会撑满父布局宽度，放到大屏的网格里就会显得松散不协调。不过咱们完全可以用现有组件快速搭出一个风格统一、适配网格的等效项！

核心思路就是用**Card或Surface**作为网格项的容器（这俩都是Material 3的基础组件，自带阴影、圆角这些MD3原生视觉风格），然后在内部复刻ListItem的结构：把leading图标、overline、标题、辅助文本、trailing内容按同样的布局逻辑排列，这样既保持了和ListItem一致的视觉语言，又能自由控制网格项的尺寸。

比如模仿你贴的ListItem代码，咱们可以写出这样的自定义网格项：

@Composable
fun GridListItem(
    headlineContent: @Composable () -> Unit,
    overlineContent: @Composable (() -> Unit)? = null,
    supportingContent: @Composable (() -> Unit)? = null,
    leadingContent: @Composable (() -> Unit)? = null,
    trailingContent: @Composable (() -> Unit)? = null,
    modifier: Modifier = Modifier
) {
    Card(
        modifier = modifier,
        elevation = CardDefaults.cardElevation(defaultElevation = 1.dp)
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp), // 和ListItem的默认内边距对齐
            verticalAlignment = Alignment.CenterVertically
        ) {
            // 左侧图标区域
            leadingContent?.let {
                Box(modifier = Modifier.size(40.dp)) {
                    it()
                }
                Spacer(modifier = Modifier.width(16.dp))
            }

            // 中间文本区域（垂直排列overline、标题、辅助文本）
            Column(
                modifier = Modifier.weight(1f),
                verticalArrangement = Arrangement.Center
            ) {
                overlineContent?.let {
                    it()
                    Spacer(modifier = Modifier.height(4.dp))
                }
                headlineContent()
                supportingContent?.let {
                    Spacer(modifier = Modifier.height(4.dp))
                    it()
                }
            }

            // 右侧尾部内容
            trailingContent?.let {
                Spacer(modifier = Modifier.width(16.dp))
                it()
            }
        }
    }
}

接下来把这个自定义的GridListItem放到LazyVerticalGrid里就能得到完美的网格布局了，示例代码如下：

LazyVerticalGrid(
    columns = GridCells.Adaptive(minSize = 280.dp), // 自适应大屏，控制每个网格项的最小宽度
    contentPadding = PaddingValues(16.dp),
    horizontalArrangement = Arrangement.spacedBy(16.dp),
    verticalArrangement = Arrangement.spacedBy(16.dp)
) {
    items(10) {
        GridListItem(
            headlineContent = { Text("Three line list item") },
            overlineContent = { Text("OVERLINE") },
            supportingContent = { Text("Secondary text") },
            leadingContent = {
                Icon(
                    Icons.Filled.Favorite,
                    contentDescription = "Localized description",
                )
            },
            trailingContent = { Text("meta") }
        )
    }
}

最后再补几个实用小细节：

• 要是想贴近ListItem的交互体验，可以给Card加上clickable modifier，或者用ListDefaults.itemColors设置点击态颜色，保持交互反馈统一；
• 内边距、元素尺寸都能按需调整，比如用ListDefaults.contentPadding来和官方列表组件的间距对齐；
• 如果是横向网格，只需要把内部的Row换成Column，调整排列方向就行，灵活性拉满！

备注：内容来源于stack exchange，提问作者wbk727