CircularProgressIndicator在启用状态的Button内无法显示？求解决办法

之所以启用状态的Button里CircularProgressIndicator无法显示，通常是因为启用状态下Button的默认内容色与进度条默认颜色对比度不足，或是Button的默认内边距导致进度条被压缩遮挡。以下是几种可行的解决方法：

方法1：为进度条指定明确的对比色 #

直接给CircularProgressIndicator设置与Button背景反差明显的颜色，同时可指定固定大小避免被内边距压缩：

Button(onClick = {}) {
    CircularProgressIndicator(
        color = MaterialTheme.colorScheme.onPrimary,
        modifier = Modifier.size(24.dp)
    )
}

方法2：调整Button的内边距 #

减小Button的默认内边距，为进度条留出足够的显示空间：

Button(
    onClick = {},
    contentPadding = PaddingValues(8.dp)
) {
    CircularProgressIndicator(modifier = Modifier.size(24.dp))
}

方法3：自定义Button的颜色配置 #

通过ButtonDefaults.buttonColors明确设置Button的容器色和内容色，确保进度条颜色与背景形成有效反差：

Button(
    onClick = {},
    colors = ButtonDefaults.buttonColors(
        containerColor = MaterialTheme.colorScheme.primary,
        contentColor = MaterialTheme.colorScheme.onPrimary
    )
) {
    CircularProgressIndicator()
}

方法4：用Box包裹进度条强制限定显示区域 #

通过Box组件固定进度条的显示区域，还可调整进度条的线条粗细增强可见性：

Button(onClick = {}) {
    Box(modifier = Modifier.size(24.dp), contentAlignment = Alignment.Center) {
        CircularProgressIndicator(strokeWidth = 2.dp)
    }
}

内容的提问来源于stack exchange，提问作者MoeJoe