Matarialize中文技术社区-Material UI 框架中的 Skeleton 组件详解

Material UI 框架中的 Skeleton 组件详解

smartzeng 2024-10-04 10:49:28

493 Skeleton,骨架屏专栏

Material UI 提供了许多实用的组件来帮助开发者构建现代化、响应式的应用程序界面。Skeleton 组件是 Material UI 中用于页面或组件加载时的占位符组件，它能让用户在等待数据加载时，仍能看到一个界面结构的“骨架”版本，从而提高用户体验。

本文将详细介绍 Material UI 中 Skeleton 组件的使用，覆盖所有属性、方法及如何结合其他组件使用，并提供多个详细的代码示例，展示如何将 Skeleton 应用于不同场景。

1. 什么是 Skeleton？

Skeleton 是一种 UI 占位符，通常在数据加载时显示。通过 Skeleton，我们可以模仿实际 UI 元素的形状，如文本、图片、按钮等，让用户了解界面结构。

它的常见应用场景包括：

加载列表数据时。
加载用户头像、产品图片或图表时。
加载整个页面或部分内容时。

2. 安装 Material UI

在开始使用 Skeleton 之前，确保你已安装 Material UI 相关包：

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

3. Skeleton 基本用法

Skeleton 组件可以通过设置 variant 属性，定义占位元素的形状，比如 text、rectangular 和 circular。

3.1 文本骨架

文本的占位符骨架可以使用 variant="text"，它会模仿一段文本的形状。

示例代码：

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

function TextSkeletonExample() {
  return (
    <div>
      <h3>文本骨架示例</h3>
      <Skeleton variant="text" width={200} />
    </div>
  );
}

export default TextSkeletonExample;

在该示例中，Skeleton 模拟了一个宽度为 200px 的文本骨架。在实际应用中，这样的骨架可以代替真实的文本，直到数据加载完毕。

3.2 矩形骨架

通过 variant="rectangular"，我们可以创建一个矩形的骨架元素，适合用于图片、卡片等区域的占位符。

示例代码：

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

function RectangularSkeletonExample() {
  return (
    <div>
      <h3>矩形骨架示例</h3>
      <Skeleton variant="rectangular" width={300} height={200} />
    </div>
  );
}

export default RectangularSkeletonExample;

3.3 圆形骨架

圆形骨架通过 variant="circular" 可以创建一个圆形占位符，常用于头像、按钮等圆形元素的占位显示。

示例代码：

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

function CircularSkeletonExample() {
  return (
    <div>
      <h3>圆形骨架示例</h3>
      <Skeleton variant="circular" width={100} height={100} />
    </div>
  );
}

export default CircularSkeletonExample;

该示例展示了一个 100px 的圆形骨架，通常用于图片或头像的占位。

4. Skeleton 组件的主要属性

variant：决定骨架的形状，可选值有：
- text：文本形状，占据一个或多个文本行。
- rectangular：矩形形状，用于图片或其他矩形元素。
- circular：圆形，用于头像、图标等圆形元素。
animation：设置骨架动画的类型。可选值有：
- pulse（默认）：脉冲动画效果。
- wave：波浪动画效果。
- false：无动画效果。
width 和 height：设置骨架的宽度和高度。
sx：用于应用自定义样式的 Skeleton 组件。

示例：自定义骨架宽度和高度

<Skeleton variant="rectangular" width={250} height={150} />

示例：波浪动画效果

<Skeleton variant="text" width={250} animation="wave" />

示例：禁用动画

<Skeleton variant="text" width={250} animation={false} />

5. 动态加载时结合 Skeleton 使用

Skeleton 组件常用于在异步加载数据时为用户提供反馈。通过结合 useState 和 useEffect，我们可以模拟数据加载的场景，并在加载完成后显示真实内容。

示例：加载用户信息时显示骨架

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

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

  useEffect(() => {
    setTimeout(() => setLoading(false), 3000); // 模拟 3 秒的加载时间
  }, []);

  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      {loading ? (
        <Skeleton variant="circular" width={50} height={50} />
      ) : (
        <Avatar alt="User Avatar" src="/path/to/avatar.jpg" />
      )}
      <div style={{ marginLeft: 16 }}>
        {loading ? (
          <Skeleton variant="text" width={200} />
        ) : (
          <Typography variant="h6">John Doe</Typography>
        )}
      </div>
    </div>
  );
}

export default UserProfile;

示例说明：

在该示例中，Skeleton 作为头像和用户名的占位符，在数据加载的过程中显示骨架。
使用了 useState 和 useEffect 来控制加载状态，模拟了一个 3 秒后加载完成的场景。

6. 与其他组件结合使用

Skeleton 通常结合其他 Material UI 组件使用，如 Card、List、Avatar 等。下面展示一个结合 Card 组件的使用场景。

示例：卡片内容骨架

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

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

  useEffect(() => {
    setTimeout(() => setLoading(false), 3000); // 模拟 3 秒的加载时间
  }, []);

  return (
    <Card>
      <CardContent>
        {loading ? (
          <>
            <Skeleton variant="text" width={200} />
            <Skeleton variant="rectangular" width={300} height={200} />
            <Skeleton variant="text" width={150} />
          </>
        ) : (
          <>
            <Typography variant="h5">标题</Typography>
            <img src="/path/to/image.jpg" alt="content" width={300} height={200} />
            <Typography variant="body1">这是加载完成后的内容。</Typography>
          </>
        )}
      </CardContent>
    </Card>
  );
}

export default CardSkeleton;

示例说明：

该示例展示了一个典型的卡片组件，包含标题、图片和文本。
在加载过程中，Skeleton 占位符会显示一个模拟的标题和图片区域。
加载完成后，实际内容替换骨架。

7. 动态列表的骨架加载

当我们加载一个列表数据时，可以为每个列表项显示一个 Skeleton 占位符。这个模式在分页加载或无穷加载中尤为常见。

示例：加载列表时显示骨架

import React, { useState, useEffect } from 'react';
import Skeleton from '@mui/material/Skeleton';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';

function ListSkeleton() {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
    setTimeout(() => {
      setData([
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ]);
      setLoading(false);
    }, 3000);
  }, []);

  return (
    <List>
      {loading ? (
        Array.from(new Array(3)).map((_, index) => (
          <ListItem key={index}>
            <Skeleton variant="text" width={200} />
          </ListItem>
        ))
      ) : (
        data.map((item) => (
          <ListItem key={item.id}>
            <ListItemText

 primary={item.name} />
          </ListItem>
        ))
      )}
    </List>
  );
}

export default ListSkeleton;

8. 总结

Skeleton 组件在 Material UI 中扮演着非常重要的角色，特别是在需要显示占位符和数据加载的过程中。通过使用不同的 variant 和自定义样式，开发者可以创建灵活多样的占位骨架，以提供更好的用户体验。在实际开发中，结合其他 Material UI 组件，如 Card、List 等，可以轻松地为复杂的界面提供过渡效果，让用户感觉更加流畅和直观。

通过这篇文章，希望你能更好地理解 Skeleton 组件的使用，并将其应用到项目中，提升应用的用户体验。

评论区