Jetpack Compose中CircularProgressIndicator无法正常调整大小求助

问题代码 #

Row (
    modifier = Modifier.fillMaxWidth().padding(16.dp),
    verticalAlignment = Alignment.CenterVertically
) {
    Checkbox(
        checked = checked,
        enabled = habit.enabled,
        onCheckedChange = { checked = !checked },
        modifier = Modifier.size(23.dp).padding(end = 8.dp)
    )
    CircularProgressIndicator(
        progress = animatedProgress,
        modifier = Modifier.size(23.dp).padding(end = 8.dp)
    )
    Icon(
        imageVector = habit.icon,
        contentDescription = null,
        modifier = Modifier.padding(end = 8.dp)
    )
    Text(
        text = LocalContext.current.getString(habit.stringResourceId),
        maxLines = 1
    )
}

问题原因 #

虽然给三个组件设置了相同的size(23.dp)，但CircularProgressIndicator默认的strokeWidth（4.dp）和内部内边距，会让它的视觉尺寸比Checkbox、Icon小——Checkbox的点击区域与视觉图标贴合度高，Icon默认无额外内边距，而进度条的描边宽度会占用内部空间，导致视觉上显小。

解决方案 #

1. 调整进度条描边宽度
   减小strokeWidth参数，让进度条在设定尺寸内更饱满：

CircularProgressIndicator(
    progress = animatedProgress,
    strokeWidth = 2.dp, // 缩小描边宽度，匹配其他组件视觉尺寸
    modifier = Modifier.size(23.dp).padding(end = 8.dp)
)

2. 移除默认内边距（可选）
   如果调整描边后仍有间距，可通过contentPadding移除默认内边距（需Compose 1.3及以上版本）：

CircularProgressIndicator(
    progress = animatedProgress,
    strokeWidth = 2.dp,
    modifier = Modifier.size(23.dp).padding(end = 8.dp),
    contentPadding = PaddingValues(0.dp)
)

3. 统一Icon尺寸
   给Icon也显式设置相同尺寸，确保三者完全对齐：

Icon(
    imageVector = habit.icon,
    contentDescription = null,
    modifier = Modifier.size(23.dp).padding(end = 8.dp)
)

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