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

Question

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

▲ 可与意外的垂直填充组合

@Preview(showBackground = true)
@Composable
fun OutcomeItemPreview() {
    SuperBowlTheme {
        OutcomeItem(outcome = Outcome("4반 승!", arrayListOf())) {}
    }
}

https://i.stack.imgur.com/pBa13.png 我无法 post 内联图片，抱歉

▲我的预览

我不知道垂直填充是从哪里来的。我试过在 Card 修饰符上添加 .padding(0.dp)，但没有用

++ OutcomeItem 的根可组合项

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

Answer 1

卡片指定了最小触摸目标尺寸定义的最小尺寸；您的内容未填充 space，因此填充被添加到卡片之外。

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

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


@OptIn(ExperimentalMaterialApi::class)
@Composable
fun OutcomeItem(outcome: Outcome, onVote: () -> Unit) {
    CompositionLocalProvider(
        LocalMinimumTouchTargetEnforcement 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
            )
        }
    }
}

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

Jetpack Compose - Unexpected vertical padding on Card

android

kotlin

android-jetpack-compose