【Material-UI】Circular Progress 详解：多种用法与集成

本文链接：https://blog.csdn.net/lph159/article/details/141888687

文章目录

Material-UI 是 React 生态系统中的一款极受欢迎的 UI 框架，提供了丰富的组件库以帮助开发者轻松构建用户界面。其中，Circular Progress 是一种常见的进度指示器，广泛应用于加载状态的展示。本文将详细介绍 Circular Progress 组件的不同用法及其在实际项目中的应用。

一、Circular Progress 组件概述

1. 组件介绍

Circular Progress 是一种环形进度条，用于指示操作或任务的完成状态。与线性进度条不同，环形进度条可以在空间有限的情况下提供更灵活的进度展示方式，尤其适合在对话框、按钮等小型 UI 元素中使用。

2. 基本用法

Circular Progress 组件在 Material-UI 中的使用非常简单。默认情况下，组件展示为一个不确定进度（indeterminate）的环形进度条，其进度将通过动画循环展示。

<CircularProgress />

二、Circular Progress 的多种状态

1. 不确定进度（Indeterminate）

不确定进度表示任务的进度未知或不确定。这种情况下，Circular Progress 会以动画形式循环展示，表明任务正在进行中。

<CircularProgress />

在这种状态下，进度条的动画将持续旋转，直到任务完成或状态更新。这种模式通常用于加载数据、提交表单等需要异步处理的操作。

2. 自定义颜色

Circular Progress 组件支持通过 color 属性自定义颜色。Material-UI 提供了一些预定义的颜色选项，如 secondary、success 和 inherit。

<CircularProgress color="secondary" />
<CircularProgress color="success" />
<CircularProgress color="inherit" />

secondary：使用 Material-UI 主题中的次要颜色。
success：使用成功状态的颜色，通常为绿色。
inherit：继承父组件的颜色。

3. 确定进度（Determinate）

当任务的进度已知时，可以使用确定进度模式（determinate）。在这种模式下，开发者可以通过 value 属性设置当前的进度值（0-100）。

<CircularProgress variant="determinate" value={25} />
<CircularProgress variant="determinate" value={50} />
<CircularProgress variant="determinate" value={75} />
<CircularProgress variant="determinate" value={100} />

在这个例子中，四个 Circular Progress 组件分别展示了 25%、50%、75% 和 100% 的进度状态。这种模式适用于如文件上传、数据处理等需要实时反馈的操作。

三、交互式集成

1. 基本集成

Circular Progress 组件可以与其他 UI 元素集成，形成更复杂的交互模式。例如，将其与按钮结合使用，当用户点击按钮时展示加载状态。

import * as React from 'react';
import Box from '@mui/material/Box';
import CircularProgress from '@mui/material/CircularProgress';
import Button from '@mui/material/Button';

export default function CircularIntegration() {
  const [loading, setLoading] = React.useState(false);

  const handleButtonClick = () => {
    setLoading(true);
    setTimeout(() => setLoading(false), 2000);
  };

  return (
    <Box sx={{ display: 'flex', alignItems: 'center' }}>
      <Button variant="contained" disabled={loading} onClick={handleButtonClick}>
        {loading ? <CircularProgress size={24} /> : "Accept"}
      </Button>
    </Box>
  );
}

在这个示例中，点击按钮后会触发加载状态，Circular Progress 将在按钮内部展示一个小型进度指示器，表明任务正在处理。

2. 更复杂的交互

开发者还可以通过结合 Fab（浮动操作按钮）和 Circular Progress 实现更复杂的交互效果。以下示例展示了一个“保存”按钮的使用场景，点击后按钮会显示加载状态，任务完成后按钮将切换为“完成”图标。

import * as React from 'react';
import Box from '@mui/material/Box';
import CircularProgress from '@mui/material/CircularProgress';
import { green } from '@mui/material/colors';
import Button from '@mui/material/Button';
import Fab from '@mui/material/Fab';
import CheckIcon from '@mui/icons-material/Check';
import SaveIcon from '@mui/icons-material/Save';

export default function CircularIntegration() {
  const [loading, setLoading] = React.useState(false);
  const [success, setSuccess] = React.useState(false);
  const timer = React.useRef(undefined);

  const buttonSx = {
    ...(success && {
      bgcolor: green[500],
      '&:hover': {
        bgcolor: green[700],
      },
    }),
  };

  const handleButtonClick = () => {
    if (!loading) {
      setSuccess(false);
      setLoading(true);
      timer.current = setTimeout(() => {
        setSuccess(true);
        setLoading(false);
      }, 2000);
    }
  };

  return (
    <Box sx={{ display: 'flex', alignItems: 'center' }}>
      <Box sx={{ m: 1, position: 'relative' }}>
        <Fab aria-label="save" color="primary" sx={buttonSx} onClick={handleButtonClick}>
          {success ? <CheckIcon /> : <SaveIcon />}
        </Fab>
        {loading && (
          <CircularProgress
            size={68}
            sx={{
              color: green[500],
              position: 'absolute',
              top: -6,
              left: -6,
              zIndex: 1,
            }}
          />
        )}
      </Box>
      <Box sx={{ m: 1, position: 'relative' }}>
        <Button variant="contained" sx={buttonSx} disabled={loading} onClick={handleButtonClick}>
          Accept terms
        </Button>
        {loading && (
          <CircularProgress
            size={24}
            sx={{
              color: green[500],
              position: 'absolute',
              top: '50%',
              left: '50%',
              marginTop: '-12px',
              marginLeft: '-12px',
            }}
          />
        )}
      </Box>
    </Box>
  );
}

这个示例展示了如何在按钮内集成 Circular Progress，并在任务完成时切换按钮状态。这种交互方式特别适用于表单提交、文件保存等需要一定时间处理的操作。

四、带标签的 Circular Progress

在某些场景下，开发者可能希望在进度指示器上直接展示数值标签。这时，可以创建一个自定义组件来实现这一功能。

function CircularProgressWithLabel(props) {
  return (
    <Box sx={{ position: 'relative', display: 'inline-flex' }}>
      <CircularProgress variant="determinate" {...props} />
      <Box
        sx={{
          top: 0,
          left: 0,
          bottom: 0,
          right: 0,
          position: 'absolute',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <Typography variant="caption" component="div" color="textSecondary">{`${Math.round(
          props.value,
        )}%`}</Typography>
      </Box>
    </Box>
  );
}