Jetpack Compose 进度条

IT乐手2024-04-09 13:51

确定指示符

确定性指示符可准确反映操作完成的程度。请使用 $`LinearProgressIndicator`$ 或 $`CircularProgressIndicator`$ 可组合项，并为 progress 形参传递值。

以下代码段提供了一个相对详细的示例。当用户按下该按钮时，应用既显示进度指示器，又启动一个逐渐增大 progress 值的协程。这会导致进度指示器依次向上迭代。

ts 复制代码

@Composable
private fun example1() {
  val currentProgress = remember { mutableStateOf(0.5f) }
  Column {
      customTitle(title = "确定指示符 效果")
      LinearProgressIndicator(
          progress = { currentProgress.value },
          modifier = Modifier.fillMaxWidth(),
      )
  }
}

ts 复制代码

@Composable
private fun example2() {
  val currentProgress = remember { mutableStateOf(0.5f) }
  Column {
      customTitle(title = "确定指示符(圆形) 效果")
      CircularProgressIndicator(
          progress = { currentProgress.value },
          modifier = Modifier.size(64.dp).padding(start = 15.dp),
          color = MaterialTheme.colorScheme.secondary,
          trackColor = MaterialTheme.colorScheme.surfaceVariant,
      )
  }
}

不确定指示符

不确定性指示器并不反映操作已经完成的距离，而是使用运动向用户表明处理正在进行中，但不指定任何完成程度。

如需创建不确定的进度指示器，请使用 LinearProgressIndicator 或 CircularProgressIndicator 可组合项，但不要传入 progress 的值。以下示例演示了如何通过按下按钮来切换不确定性指示器。

CircularProgressIndicator 的效果

ts 复制代码

@Composable
private fun example3() {
  Column {
      customTitle(title = "不确定指示符 效果")
      CircularProgressIndicator(
          modifier = Modifier.width(64.dp),
          color = MaterialTheme.colorScheme.secondary,
          trackColor = MaterialTheme.colorScheme.surfaceVariant,
      )
  }
}

LinearProgressIndicator 的效果

ts 复制代码

@Composable
private fun example4() {
  Column {
      customTitle(title = "不确定指示符（线条） 效果")
      LinearProgressIndicator(
          color = MaterialTheme.colorScheme.secondary,
          trackColor = MaterialTheme.colorScheme.surfaceVariant,
          modifier = Modifier.fillMaxWidth(),
      )
  }
}

上一篇 Jetpack Compose 对话框