如何移除Jetpack Compose中LazyColumn内Surface的上下内边距

在使用compose_bom="2022.11.00"的Material3稳定版本时，给Surface设置onClick后，它会自动应用Material3 List Item的默认样式——包含上下内边距和最小高度，这就是你看到的额外空白的原因。以下是两种稳定版可用的解决办法：

方案一：在Material3 Surface内移除内边距 #

直接给Surface指定contentPadding = PaddingValues(0.dp)，同时可根据需求覆盖默认的最小高度：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CreateListView() {
    val itemList = listOf(1, 2, 3)
    LazyColumn(
        contentPadding = PaddingValues(16.dp),
    ) {
        items(itemList) { item ->
            Surface(
                onClick = { },
                color = Color.Blue,
                // 移除默认内边距
                contentPadding = PaddingValues(0.dp),
                // 可选：取消默认最小高度限制
                minHeight = 0.dp
            ) {
                Text(
                    modifier = Modifier.fillMaxWidth(),
                    text = "$item",
                )
            }
        }
    }
}

方案二：改用Material（旧版）的Surface #

如果Material3的Surface默认样式约束过多，可切换到旧版Material库的Surface，它不会自动添加List相关的内边距。

首先确保添加Material依赖：

implementation "androidx.compose.material:material:1.4.3"

然后修改代码，导入并使用旧版Material的Surface：

// 导入material包的Surface，而非material3
import androidx.compose.material.Surface

@Composable
fun CreateListView() {
    val itemList = listOf(1, 2, 3)
    LazyColumn(
        contentPadding = PaddingValues(16.dp),
    ) {
        items(itemList) { item ->
            Surface(
                onClick = { },
                color = Color.Blue
            ) {
                Text(
                    modifier = Modifier.fillMaxWidth(),
                    text = "$item",
                )
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者Compose Learner