Skip to content

LoadingIndicator — 加载 / 进度指示器 ​

统一替代各处手写的 CircularProgressIndicator,避免尺寸、描边、配色各写一套。形态是 Material 3 Expressive 波浪指示器(会做多边形形变 + 旋转)。

基本用法 ​

kotlin
LoadingIndicator()                                  // 波浪、不确定进度
LoadingIndicator(progress = 0.42f)                  // 波浪、确定进度,自动显示 "42%"
LoadingIndicator(size = LoadingIndicatorSize.Medium, label = "加载中…")
LoadingIndicator(progress = 0.42f, label = "")      // 确定进度,但不要百分比文字

整页加载(居中 + 大档):

kotlin
Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
    LoadingIndicator(size = LoadingIndicatorSize.Large, label = "正在解析…")
}

参数 ​

参数类型默认值说明
modifierModifierModifier修饰符
progressFloat?nullnull = 不确定进度(无限动画);0f..1f = 确定进度,超出范围会被夹取
sizeLoadingIndicatorSizeSmall尺寸档位
labelString?null指示器下方文案。三态规则见「要点」
colorColor?null一次性覆盖指示器与文案两处颜色;null 时取 colors 的值
colorsLoadingIndicatorColorsLoadingIndicatorDefaults.colors()分别给指示器和文案配色

LoadingIndicatorSize ​

三档形态完全相同(都是波浪),只决定直径和文案字号:

档位直径与文案间距用在哪
Small22.dp8.dp弹窗、列表项、卡片内嵌(默认档)
Medium40.dp12.dp页面局部加载区
Large56.dp14.dp整页加载

LoadingIndicatorColors ​

字段默认值说明
indicatorColorMaterialTheme.colorScheme.primary波浪本身
labelColorMaterialTheme.colorScheme.primary下方文案

要点 ​

  • label 是三态,不是两态:

    • 传 null(默认)= 「你按进度自己决定」→ 确定进度显示百分比,不确定进度什么都不显示;
    • 传 "" = 强制不显示任何文案,确定进度也不显示百分比;
    • 传非空串 = 就显示这个串。

    所以「确定进度但不要百分比」要传 label = "",传 null 会得到百分比。

  • size 只改直径,不改形态。 小尺寸也是波浪,不是圆环 —— 早期文档写的「小尺寸走圆环」是错的。

  • 需要「不确定进度 + 自定义文案」时必须给 label,否则波浪下面空空如也。

  • 两个颜色入口,color 优先。 只想统一改一个颜色用 color;想分别改指示器和文案用 colors。

说明 ​

  • 为什么不用 Material3 的 ProgressIndicatorColors:波浪指示器只有「指示器 / 文案」两个着色点,摊平成一个双槽位的 LoadingIndicatorColors,比复用 M3 那一整套更好懂 —— 调用方想改哪个改哪个。
  • 文案字号跟档位走:Small 用 labelMedium 并加 SemiBold,其余档位用 bodyMedium。小档位在一眼扫过时需要把字重提上来才看得清。
  • 和状态页的分工:整页的「加载中 / 出错 / 空」用状态页那套;只是某一块区域在转的,用 LoadingIndicator。