@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
        )
    }
}

▲ Composable with unexpected vertical padding

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

https://i.stack.imgur.com/pBa13.png I couldn't post inline image, sorry

▲My preview

I have no idea where did that vertical padding came from. I've tried adding .padding(0.dp) on Card modifier, but it didn't work

root composable of OutcomeItem

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

CodePudding user response：

Card specifies a minimum size defined by the minimum touch target size; your content doesn't fill that space, so the padding is added outside of the card.

You can either make the content taller, or wrap your card and tell it to not enforce the minimum touch target size.

I wouldn't recommend it, but this is how you'd ignore the minimum size:

@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
            )
        }
    }
}