进度指示器

CircularProgressIndicator 组件通过环形显示进程时长或其他未指定的等待时间。

进度指示器可以显示已完成任务的比例。如需显示进度，指示器应沿顺时针方向的环形轨道呈现动画效果。

您可以将进度指示器应用于播放按钮等组件。

剖析

A. 圆轨
B. 圆轨进度

设计建议

带间隔的进度指示器

在创建进度指示器时留出间隔空间来存储重要信息（例如时间）。如需创建间隙，请更改进度指示器的 startAngle 和 endAngle。

请依照以下示例创建带间隙的进度指示器：

CircularProgressIndicator(
    progress = 0.4f,
    modifier = Modifier.fillMaxSize(),
    startAngle = 10f,
    endAngle = 290f,
    strokeWidth = 4.dp
)

小进度指示器

当指定进度与按钮代表的操作直接相关，并且屏幕空间有限时，可以直接将小进度指示器应用于按钮。

您可以依照以下示例创建小进度指示器：

CircularProgressIndicator(
    progress = 0.75,
    modifier = Modifier.fillMaxSize(),
    startAngle = 0,
    indicatorColor = MaterialTheme.colors.secondary,
    trackColor = MaterialTheme.colors.onBackground.copy(alpha = 0.1f),
    strokeWidth = 4.dp
)

不确定进度指示器

在未设置时间的情形中使用进度指示器时，请使用带有动画值的进度指示器。这也称为旋转图标。请谨慎使用旋转图标，因为它们可能会增加等待时间。

您可以依照以下示例创建不确定进度指示器：

CircularProgressIndicator(
    indicatorColor = MaterialTheme.colors.secondary,
    trackColor = MaterialTheme.colors.onBackground.copy(alpha = 0.1f),
    strokeWidth = 4.dp
)

用法

请参阅以下进度指示器示例。