M3E 设计系统
M3E 设计系统 · androidx.compose.material3
Wavy Progress：波形进度不是 LoadingIndicator1.5.0-alpha25
区分线性/环形波形进度与形状加载指示器，正确选择 determinate 和 indeterminate 版本。
最后更新 2026-08-01
两种组件解决不同问题
LoadingIndicator 在多个 polygon 之间变化；Wavy Progress 保留线性或环形进度轨道，但活动部分使用波形表达。它们都能表现进度，却不是互换皮肤。
catalog 当前包含：
- LinearWavyProgressIndicator
- IndeterminateLinearWavyProgressIndicator
- CircularWavyProgressIndicator
- IndeterminateCircularWavyProgressIndicator
选择规则
- 有真实比例：传
progress = { value }。 - 无法计算比例：使用不带 progress 的 indeterminate overload。
- 文件传输、步骤完成度：通常选 determinate。
- 很短的等待：避免闪一下就消失的指示器。
与普通 Progress 的关系
同一 ProgressIndicator.kt 仍保留普通 Linear/Circular API。是否使用 wavy 应由信息层级决定，不要为了“更 Expressive”让所有后台任务都持续抢注意力。
复制即用
线性与环形波形进度：
import androidx.compose.material3.CircularWavyProgressIndicator
import androidx.compose.material3.IndeterminateLinearWavyProgressIndicator
import androidx.compose.material3.LinearWavyProgressIndicator
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
@Composable
fun LinearDeterminate() {
var progress by remember { mutableFloatStateOf(0.6f) }
LinearWavyProgressIndicator(progress = { progress })
}
@Composable
fun LinearIndeterminate() {
IndeterminateLinearWavyProgressIndicator()
}
@Composable
fun CircularDeterminate() {
var progress by remember { mutableFloatStateOf(0.6f) }
CircularWavyProgressIndicator(progress = { progress })
}有真实比例用 determinate；无法计算比例用 indeterminate 版本。