Matarialize中文技术社区-Material UI Progress 组件详解及示例

Material UI Progress 组件详解及示例

smartzeng 2024-10-04 10:43:45

484 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 显示具体进度

如果你想显示任务的具体进度，使用 value 和 variant="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（默认）、secondary 和 inherit。
variant：进度条的模式，支持 determinate（可确定进度）、indeterminate（未知进度）、buffer（带缓冲）和 query（搜索模式）。
value：表示当前进度的百分比，仅在 determinate 和 buffer 模式下可用。
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：设置进度条的颜色，支持 primary、secondary 和 inherit。
variant：支持 determinate 和 indeterminate 两种模式。
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;

示例分析：

在这个例子中，使用 useState 和 useEffect 模拟了一个 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 组件通常与 Button、Dialog、Snackbar 等组件结合使用，以提供更好的用户交互体验。

示例：结合 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 元素结合使用，为用户提供流畅的交互体验。在实际开发中，可以根据需求自定义样式、颜色和尺寸，以便更好地适配项目的设计风格。

评论区