外观
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 = "正在解析…")
}参数
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modifier | Modifier | Modifier | 修饰符 |
progress | Float? | null | null = 不确定进度(无限动画);0f..1f = 确定进度,超出范围会被夹取 |
size | LoadingIndicatorSize | Small | 尺寸档位 |
label | String? | null | 指示器下方文案。三态规则见「要点」 |
color | Color? | null | 一次性覆盖指示器与文案两处颜色;null 时取 colors 的值 |
colors | LoadingIndicatorColors | LoadingIndicatorDefaults.colors() | 分别给指示器和文案配色 |
LoadingIndicatorSize
三档形态完全相同(都是波浪),只决定直径和文案字号:
| 档位 | 直径 | 与文案间距 | 用在哪 |
|---|---|---|---|
Small | 22.dp | 8.dp | 弹窗、列表项、卡片内嵌(默认档) |
Medium | 40.dp | 12.dp | 页面局部加载区 |
Large | 56.dp | 14.dp | 整页加载 |
LoadingIndicatorColors
| 字段 | 默认值 | 说明 |
|---|---|---|
indicatorColor | MaterialTheme.colorScheme.primary | 波浪本身 |
labelColor | MaterialTheme.colorScheme.primary | 下方文案 |
要点
label是三态,不是两态:- 传
null(默认)= 「你按进度自己决定」→ 确定进度显示百分比,不确定进度什么都不显示; - 传
""= 强制不显示任何文案,确定进度也不显示百分比; - 传非空串 = 就显示这个串。
所以「确定进度但不要百分比」要传
label = "",传null会得到百分比。- 传
size只改直径,不改形态。 小尺寸也是波浪,不是圆环 —— 早期文档写的「小尺寸走圆环」是错的。需要「不确定进度 + 自定义文案」时必须给
label,否则波浪下面空空如也。两个颜色入口,
color优先。 只想统一改一个颜色用color;想分别改指示器和文案用colors。
说明
- 为什么不用 Material3 的
ProgressIndicatorColors:波浪指示器只有「指示器 / 文案」两个着色点,摊平成一个双槽位的LoadingIndicatorColors,比复用 M3 那一整套更好懂 —— 调用方想改哪个改哪个。 - 文案字号跟档位走:
Small用labelMedium并加SemiBold,其余档位用bodyMedium。小档位在一眼扫过时需要把字重提上来才看得清。 - 和状态页的分工:整页的「加载中 / 出错 / 空」用状态页那套;只是某一块区域在转的,用
LoadingIndicator。