Jetpack Compose中如何让Row包裹动态尺寸内容？

你的问题核心是Button默认的最小触摸区域限制，以及Row的排列设置导致高度冗余，按以下步骤修改即可解决：

步骤1：关闭Button的默认最小触摸区域 #

Jetpack Compose的Button自带强制触摸区域至少48dp的规则，哪怕你用defaultMinSize缩小了布局尺寸，这个触摸区域的大小仍会让Row的高度被撑大。给每个Button添加minimumTouchTargetSize(enabled = false)修饰符，彻底关闭这个限制：

Button(
    modifier = Modifier
        .defaultMinSize(minWidth = 1.dp, minHeight = 1.dp)
        .minimumTouchTargetSize(enabled = false), // 新增该行关闭触摸区域限制
    onClick = { /*TODO*/ },
    contentPadding = PaddingValues(0.dp)
) {
    Text(text = "HELLO")
}

步骤2：调整Row的垂直对齐设置（可选） #

如果保留verticalAlignment = Alignment.CenterVertically，在Button尺寸较小时仍可能出现Row高度冗余，可直接移除该参数，让Row默认按顶部对齐，高度完全由子Button的内容决定：

Row(
    horizontalArrangement = Arrangement.SpaceEvenly,
    // 移除verticalAlignment参数
    modifier = Modifier
        .wrapContentSize()
        .background(LightGrey)
) {
    // 两个Button代码同上
}

修改后的完整代码 #

Row(
    horizontalArrangement = Arrangement.SpaceEvenly,
    modifier = Modifier
        .wrapContentSize()
        .background(LightGrey)
) {
    Button(
        modifier = Modifier
            .defaultMinSize(minWidth = 1.dp, minHeight = 1.dp)
            .minimumTouchTargetSize(enabled = false),
        onClick = { /*TODO*/ },
        contentPadding = PaddingValues(0.dp)
    ) {
        Text(text = "HELLO")
    }
    Button(
        modifier = Modifier
            .defaultMinSize(minWidth = 1.dp, minHeight = 1.dp)
            .minimumTouchTargetSize(enabled = false),
        onClick = { /*TODO*/ },
        contentPadding = PaddingValues(0.dp)
    ) {
        Text(text = "HELLO")
    }
}

修改后Row的高度会完全适配Button的内容高度，不会再出现冗余的背景区域。

内容的提问来源于stack exchange，提问作者D-I-S-C