Jetpack Compose - 卡片上出现意外的垂直填充

Question

@OptIn(ExperimentalMaterialApi::class)\n@Composable\nfun OutcomeItem(outcome: Outcome, onVote: () -> Unit) {\n    Card(\n        modifier = Modifier\n            .fillMaxWidth()\n            .wrapContentHeight(),\n        elevation = 4.dp,\n        onClick = { onVote() }\n    ) {\n        Text(\n            modifier = Modifier\n                .padding(4.dp)\n            ,\n            text = outcome.title,\n            style = MaterialTheme.typography.h6\n        )\n    }\n}\n

\n

\xe2\x96\xb2 可与意外的垂直填充组合

\n

@Preview(showBackground = true)\n@Composable\nfun OutcomeItemPreview() {\n    SuperBowlTheme {\n        OutcomeItem(outcome = Outcome("4\xeb\xb0\x98 \xec\x8a\xb9!", arrayListOf())) {}\n    }\n}\n

\n

https://i.stack.imgur.com/pBa13.png \n我无法发布内联图像，抱歉

\n

\xe2\x96\xb2我的预览

\n

我不知道垂直填充从何而来。\n我尝试在卡片修改器上添加 .padding(0.dp)，但它不起作用

\n

++ OutcomeItem 的根可组合项

\n

@Composable\nfun OutcomeContent(outcomes: List<Outcome>) {\n    if (outcomes.size <= 2) {\n        TwoOutcomeContent(outcomes)\n    } else\n        Column(\n            modifier = Modifier\n                .fillMaxWidth(),\n        ) {\n            outcomes.forEach { outcome ->\n                OutcomeItem(outcome = outcome) {  }\n            }\n        }\n    }\n}\n

\n

Answer 1

Card规定了最小触摸目标尺寸定义的最小尺寸；您的内容没有填充该空间，因此填充被添加到卡的外部。

您可以使内容更高，或者包裹您的卡片并告诉它不要强制执行最小触摸目标尺寸。

我不推荐它，但这就是您忽略最小尺寸的方式：

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun OutcomeItem(outcome: Outcome, onVote: () -> Unit) {
    CompositionLocalProvider(
        LocalMinimumInteractiveComponentEnforcement provides false,
    ) {
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentHeight(),
            elevation = 4.dp,
            onClick = { onVote() }
        ) {
            Text(
                modifier = Modifier
                    .padding(4.dp),
                text = outcome.title,
                style = MaterialTheme.typography.h6
            )
        }
    }
}