Material UI Progress 组件详解及示例

class Progress

Progress 是 Material UI 中用于指示应用程序当前正在执行后台操作的组件。它能够为用户提供视觉反馈,以表明程序是否在处理任务、任务的进度以及完成的百分比。Material UI 提供了多种 Progress 组件,包括:

  • Linear Progress(线性进度条)
  • Circular Progress(圆形进度条)

本文将详细介绍 Material UI 中 Progress 组件的使用方法,涵盖其所有属性,并提供详细的代码示例,展示如何结合其他组件来创建复杂的进度指示界面。

1. 安装 Material UI

在开始使用 Progress 组件之前,确保你已经安装了 Material UI:

npm install @mui/material @emotion/react @emotion/styled

2. Linear Progress 组件

2.1 基本使用

Linear Progress 组件用于创建线性进度条,它可以显示进度的完成百分比或无限循环的动画(指示未知进度的任务)。

示例代码:

import React from 'react';
import LinearProgress from '@mui/material/LinearProgress';

function LinearProgressExample() {
  return (
    <div>
      <h3>线性进度条</h3>
      <LinearProgress />
    </div>
  );
}

export default LinearProgressExample;

在这个例子中,LinearProgress 以无限加载动画的形式呈现。它没有显示具体的进度,只是表明某个操作正在进行中。

2.2 显示具体进度

如果你想显示任务的具体进度,使用 valuevariant="determinate" 属性。value 的取值范围是 0-100。

示例代码:

import React, { useState } from 'react';
import LinearProgress from '@mui/material/LinearProgress';
import Button from '@mui/material/Button';

function LinearDeterminateProgress() {
  const [progress, setProgress] = useState(0);

  const handleProgress = () => {
    setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));
  };

  return (
    <div>
      <h3>可确定进度的线性进度条</h3>
      <LinearProgress variant="determinate" value={progress} />
      <br />
      <Button variant="contained" onClick={handleProgress}>
        增加进度
      </Button>
    </div>
  );
}

export default LinearDeterminateProgress;

代码解释:

  • variant="determinate":设置进度条为确定进度模式,可以使用 value 属性来控制进度条的显示。
  • value:接受一个 0 到 100 之间的数字,表示当前的进度百分比。

2.3 缓冲进度条

LinearProgress 还支持缓冲模式,在这种模式下,你可以显示当前进度和缓冲区进度。

示例代码:

import React from 'react';
import LinearProgress from '@mui/material/LinearProgress';

function LinearBufferProgress() {
  return (
    <div>
      <h3>带缓冲的进度条</h3>
      <LinearProgress variant="buffer" value={50} valueBuffer={75} />
    </div>
  );
}

export default LinearBufferProgress;

代码解释:

  • variant="buffer":缓冲模式,允许显示缓冲进度。
  • valueBuffer:设置缓冲进度的百分比。

2.4 LinearProgress 的核心属性

  • color:控制进度条的颜色,支持 primary(默认)、secondaryinherit
  • variant:进度条的模式,支持 determinate(可确定进度)、indeterminate(未知进度)、buffer(带缓冲)和 query(搜索模式)。
  • value:表示当前进度的百分比,仅在 determinatebuffer 模式下可用。
  • valueBuffer:表示缓冲进度,仅在 buffer 模式下可用。

示例代码:自定义颜色的进度条

<LinearProgress variant="determinate" value={75} color="secondary" />

示例代码:搜索模式的进度条

<LinearProgress variant="query" />

3. Circular Progress 组件

Circular Progress 组件用于显示圆形进度指示器。与线性进度条类似,它也可以用于显示已完成的任务百分比或无限循环的动画。

3.1 基本使用

默认情况下,CircularProgress 会以无限循环的动画形式显示。

示例代码:

import React from 'react';
import CircularProgress from '@mui/material/CircularProgress';

function CircularProgressExample() {
  return (
    <div>
      <h3>圆形进度条</h3>
      <CircularProgress />
    </div>
  );
}

export default CircularProgressExample;

3.2 显示具体进度

通过设置 variant="determinate"value 属性,可以显示圆形进度条的具体进度。

示例代码:

import React, { useState } from 'react';
import CircularProgress from '@mui/material/CircularProgress';
import Button from '@mui/material/Button';

function CircularDeterminateProgress() {
  const [progress, setProgress] = useState(0);

  const handleProgress = () => {
    setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));
  };

  return (
    <div>
      <h3>可确定进度的圆形进度条</h3>
      <CircularProgress variant="determinate" value={progress} />
      <br />
      <Button variant="contained" onClick={handleProgress}>
        增加进度
      </Button>
    </div>
  );
}

export default CircularDeterminateProgress;

3.3 自定义尺寸

CircularProgress 的尺寸可以通过 size 属性进行调整。

示例代码:

<CircularProgress size={100} />

3.4 CircularProgress 的核心属性

  • color:设置进度条的颜色,支持 primarysecondaryinherit
  • variant:支持 determinateindeterminate 两种模式。
  • value:进度的百分比,仅在 determinate 模式下使用。
  • size:控制进度条的尺寸,默认大小为 40px。

3.5 动态加载数据时使用 Circular Progress

在动态加载数据时,CircularProgress 常用于表示应用正在加载。

示例代码:

import React, { useEffect, useState } from 'react';
import CircularProgress from '@mui/material/CircularProgress';
import Typography from '@mui/material/Typography';

function LoadingExample() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 3000);
    return () => clearTimeout(timer);
  }, []);

  return (
    <div>
      {loading ? (
        <CircularProgress />
      ) : (
        <Typography variant="h5">数据加载完成!</Typography>
      )}
    </div>
  );
}

export default LoadingExample;

示例分析:

在这个例子中,使用 useStateuseEffect 模拟了一个 3 秒后加载完成的情景。CircularProgress 在加载过程中显示,而加载完成后则替换为一段文字。

4. 自定义样式

通过 sx 属性或 makeStyles 函数可以自定义 Progress 组件的样式。例如,改变进度条的颜色、宽度或动画效果。

示例代码:

<LinearProgress
  sx={{
    height: 10,
    borderRadius: 5,
    backgroundColor: 'lightgray',
    '& .MuiLinearProgress-bar': {
      backgroundColor: 'green',
    },
  }}
  variant="determinate"
  value={75}
/>

自定义 CircularProgress 的示例:

<CircularProgress
  sx={{
    color: 'purple',
  }}
  size={80}
  thickness={4}
/>

5. 结合其他组件的使用

Progress 组件通常与 ButtonDialogSnackbar 等组件结合使用,以提供更好的用户交互体验。

示例:结合 Dialog 使用 Progress

示例代码:

import React, { useState } from 'react';
import CircularProgress from '@mui/material/CircularProgress';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import Button from '@mui/material/Button';

function ProgressInDialog() {
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleOpen = () => {
    setLoading(true);


    setOpen(true);
    setTimeout(() => {
      setLoading(false);
    }, 3000);
  };

  const handleClose = () => setOpen(false);

  return (
    <div>
      <Button variant="outlined" onClick={handleOpen}>
        打开进度对话框
      </Button>
      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>加载中...</DialogTitle>
        <DialogContent>
          {loading ? (
            <CircularProgress />
          ) : (
            <p>加载完成!</p>
          )}
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>关闭</Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

export default ProgressInDialog;

6. 总结

Material UI 的 Progress 组件提供了多种进度指示方式,适用于不同的场景。从简单的线性进度条到复杂的圆形加载器,Progress 组件可以灵活地与其他 UI 元素结合使用,为用户提供流畅的交互体验。在实际开发中,可以根据需求自定义样式、颜色和尺寸,以便更好地适配项目的设计风格。

chat评论区
评论列表
menu