如何删除 jetpack compose 中的 Surface 填充

Question

当LazyColumn我们使用LazyListScope.itemswith时Surface。在多个项目内，顶部和底部有额外的填充。我想删除这个填充。我正在使用Material 3Surface的组件。BOM版本是.compose_bom = "2022.11.00"

请不要建议任何alpha或beta版本修复。如果Material 3稳定的 api 没有解决方案，那么请建议普通的Surface Material。

预览创建列表视图

@Preview(showBackground = true)
@Composable
fun PreviewCreateListView() {
    CreateListView()
}

创建列表视图

@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
            ) {
                Text(
                    modifier = Modifier.fillMaxWidth(),
                    text = "$item",
                )
            }
        }
    }
}

输出

Answer 1

Surface带参数的M3onClick具有最小触摸目标尺寸( 48.dp)，以实现可访问性。它将在组件外部包含额外的空间，以确保它们可以访问。

您可以覆盖false应用于LocalMinimumInteractiveComponentEnforcement. 如果设置为，false则不会有多余的空间。

就像是：

CompositionLocalProvider(
    LocalMinimumInteractiveComponentEnforcement provides false) {
    
    Surface(
        onClick = { },
        color = Color.Blue
    ) {
        Text(
            modifier = Modifier.fillMaxWidth(),
            text = "$item",
        )
    }
}

注意： LocalMinimumInteractiveComponentEnforcement至少需要M21.4.0-alpha04和M3 1.1.0-alpha04。之前就可以用LocalMinimumTouchTargetEnforcement同样的方法使用了。