Android Jetpack Compose：如何在Button中垂直居中CircularProgressIndicator？

问题原因 #

Button组件默认带有contentPadding，加上CircularProgressIndicator的默认尺寸较大，两者叠加导致加载动画在Button内视觉上未垂直居中。你之前使用的align(Alignment.CenterVertically)无效，是因为Button内部的Row布局虽默认垂直居中，但默认内边距让动画位置产生了偏移。

修复方案 #

方案一：移除默认内边距并调整动画尺寸

@Preview
@Composable
private fun ButtonSandbox() {
    Button(
        enabled = false,
        modifier = Modifier.fillMaxWidth().height(48.dp),
        onClick = {},
        colors = ButtonDefaults.buttonColors(
            disabledContainerColor = MaterialTheme.colorScheme.primary,
            disabledContentColor = MaterialTheme.colorScheme.onPrimary
        ),
        contentPadding = PaddingValues(0.dp) // 移除Button默认内边距
    ) {
        CircularProgressIndicator(
            color = MaterialTheme.colorScheme.onPrimary,
            trackColor = MaterialTheme.colorScheme.onPrimary,
            modifier = Modifier.size(24.dp) // 调整动画尺寸适配Button高度
        )
    }
}

方案二：用Box包裹确保全局居中

如果需要更稳妥的居中效果，可通过Box组件将动画完全居中：

@Preview
@Composable
private fun ButtonSandbox() {
    Button(
        enabled = false,
        modifier = Modifier.fillMaxWidth().height(48.dp),
        onClick = {},
        colors = ButtonDefaults.buttonColors(
            disabledContainerColor = MaterialTheme.colorScheme.primary,
            disabledContentColor = MaterialTheme.colorScheme.onPrimary
        ),
        contentPadding = PaddingValues(0.dp)
    ) {
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            CircularProgressIndicator(
                color = MaterialTheme.colorScheme.onPrimary,
                trackColor = MaterialTheme.colorScheme.onPrimary,
                modifier = Modifier.size(24.dp)
            )
        }
    }
}

说明 #

• 移除contentPadding是为了消除Button默认的上下内边距对动画位置的挤压；
• 调整CircularProgressIndicator的size是为了让动画在48.dp高的Button中比例协调，避免因尺寸过大导致的偏移；
• 使用Box的contentAlignment = Alignment.Center可以确保动画在Button的整个范围内完全居中，不受内部布局的影响。

内容的提问来源于stack exchange，提问作者me.at.coding