如何在jetpack compose中使圆形进度指示器变小或变大

Question

如何使CircularProgressIndicatorJetpack Compose 比默认尺寸更小或更大？

CircularProgressIndicator(
    modifier = Modifier
        .size(32.dp),
)

Answer 1

您可以简单地使用：

CircularProgressIndicator(
    modifier = Modifier.then(Modifier.size(32.dp))
)

为了更好地描述这个解决方案。
如果您查看代码内部CircularProgressIndicator（至少在材料 3 中），您可以看到以下代码：

    Canvas(
        modifier
            .progressSemantics()
            .size(CircularIndicatorDiameter)
    ) {
        drawCircularIndicatorTrack(trackColor, stroke)

您提供的修饰符会被操纵，并且大小是在内部代码中设置的。由于修饰符的应用顺序，您的.size()值会立即被覆盖，因此被忽略。

要解决此问题，您可以使用Modifier.then()让 Compose 评估当前修饰符，然后在内部修饰符之后应用您的修饰符。这将使您的尺寸修改器按您的预期工作。

Answer 2

您必须将其放入CircularProgressIndicator另一个容器中：

@Composable
private fun LoadingHomeScreen() {
    val strokeWidth = 5.dp

    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        CircularProgressIndicator(
            modifier = Modifier.size(32.dp),
            color = Color.LightGray,
            strokeWidth = strokeWidth
        )
    }
}