【Material-UI】Skeleton 组件详解

Material-UI 是 React 生态系统中非常流行的 UI 框架，提供了大量的组件帮助开发者快速构建优美的用户界面。其中，Skeleton 组件是一个非常实用的占位符组件，用于在数据加载过程中展示加载状态，提升用户体验。本文将详细介绍 Material-UI 的 Skeleton 组件及其用法、变体和实际应用场景。

一、Skeleton 组件概述

1. 组件介绍

Skeleton 是 Material-UI 提供的一个占位符组件，主要用于在内容尚未加载完毕时向用户展示一个虚拟的骨架屏。这种设计模式可以显著减少页面加载时的空白体验，让用户感知到内容正在加载中。

通过使用 Skeleton 组件，开发者可以避免在数据加载过程中展示空白屏幕或者闪动的内容，从而提升用户的体验连贯性。

2. Skeleton 的基本用法

Skeleton 组件可以直接嵌入到其他组件中使用，展示内容时可以根据数据是否加载完成进行切换。下面是一个基本的用法示例：

{item ? (
  <img
    style={{
      width: 210,
      height: 118,
    }}
    alt={item.title}
    src={item.src}
  />
) : (
  <Skeleton variant="rectangular" width={210} height={118} />
)}

在这个例子中，当 item 数据尚未加载时，会显示一个宽 210px、高 118px 的矩形 Skeleton，一旦 item 数据加载完毕，则会替换为实际的图像。

二、Skeleton 的变体

Skeleton 组件支持四种不同的形状变体，用于满足不同的 UI 需求：

• text（默认）：表示一行文本。可以通过调整字体大小来控制高度。
• circular：圆形占位符，适合用于头像或其他圆形图标的加载占位。
• rectangular：矩形占位符，通常用于图片、视频等矩形内容的加载状态。
• rounded：带有圆角的矩形，适用于需要柔和边角的元素。

以下代码展示了这些不同变体的使用方式：

import * as React from 'react';
import Skeleton from '@mui/material/Skeleton';
import Stack from '@mui/material/Stack';

export default function Variants() {
  return (
    <Stack spacing={1}>
      {/* variant="text" 可以通过 font-size 调整高度 */}
      <Skeleton variant="text" sx={{ fontSize: '1rem' }} />
      {/* 其他变体可以通过 width 和 height 调整大小 */}
      <Skeleton variant="circular" width={40} height={40} />
      <Skeleton variant="rectangular" width={210} height={60} />
      <Skeleton variant="rounded" width={210} height={60} />
    </Stack>
  );
}

在这个示例中，我们展示了四种不同的 Skeleton 变体：文本（text）、圆形（circular）、矩形（rectangular）和圆角矩形（rounded）。可以根据具体场景的需求选择合适的变体。

三、Skeleton 变体的详细解析

1. Text 变体

text 变体是 Skeleton 的默认变体，常用于模拟一行或多行文本的加载状态。其高度可以通过 font-size 来控制，模拟的效果更贴近实际的文本样式。

<Skeleton variant="text" sx={{ fontSize: '1rem' }} />

这个例子中，Skeleton 高度会根据 font-size 的大小自动调整，可以通过调整字体大小来控制文本行的高度，以匹配实际的内容样式。

2. Circular 变体

circular 变体通常用于显示圆形的占位符，如用户头像、图标等。通过指定 width 和 height 可以控制圆形的大小。

<Skeleton variant="circular" width={40} height={40} />

这个例子模拟了一个宽高均为 40px 的圆形占位符，适合用于头像等场景。

3. Rectangular 变体

rectangular 变体用于展示矩形占位符，适合图片、视频等内容的加载状态。这种变体的形状更加规则，通常用于内容较为方正的区域。

<Skeleton variant="rectangular" width={210} height={60} />

在这个示例中，Skeleton 组件将显示一个宽 210px、高 60px 的矩形，占位效果与加载中的图片或视频类似。

4. Rounded 变体

rounded 变体是在 rectangular 的基础上增加了圆角，用于那些需要更柔和边角的设计场景。通过调整 width、height 和 border-radius，可以创建多种不同的视觉效果。

<Skeleton variant="rounded" width={210} height={60} />

此示例创建了一个带有圆角的矩形，占位符更加符合现代 UI 的设计风格。

四、Skeleton 组件的实际应用场景

1. 数据加载时的占位符

在实际项目中，Skeleton 最常见的用途是作为数据加载时的占位符，避免页面内容在数据尚未完全加载时显示空白或闪动。

例如，在展示用户信息时，如果头像、用户名等数据仍在加载，可以使用 Skeleton 提供更好的用户体验：

<div>
  {user ? (
    <img src={user.avatar} alt="Avatar" />
  ) : (
    <Skeleton variant="circular" width={40} height={40} />
  )}
  {user ? (
    <p>{user.name}</p>
  ) : (
    <Skeleton variant="text" sx={{ fontSize: '1rem' }} />
  )}
</div>

在这个例子中，用户头像和用户名会在数据加载完毕后替换 Skeleton 占位符，从而避免空白屏幕的出现。

2. 列表加载时的占位符

在展示长列表或网格布局的数据时，加载时间较长的场景尤其适合使用 Skeleton 组件来模拟加载中的项目。以下是一个使用 Skeleton 代替加载中的卡片列表的示例：

<Grid container spacing={2}>
  {loading ? (
    [1, 2, 3].map((item) => (
      <Grid item xs={4} key={item}>
        <Skeleton variant="rectangular" width={210} height={118} />
      </Grid>
    ))
  ) : (
    items.map((item) => (
      <Grid item xs={4} key={item.id}>
        <img src={item.src} alt={item.title} style={{ width: 210, height: 118 }} />
      </Grid>
    ))
  )}
</Grid>

在这个例子中，当 loading 状态为 true 时，会显示 3 个矩形 Skeleton 组件，而当数据加载完毕后，Skeleton 会被实际的卡片组件替代。

五、Skeleton 的优势与注意事项

1. 优势

• 提升用户体验：Skeleton 可以减少用户在数据加载时的焦虑感，提供视觉反馈，表示内容正在加载，提升用户对页面加载时间的感知。
• 灵活多变：通过不同的变体，Skeleton 组件几乎可以适用于所有需要加载占位的场景，无论是文本、图片还是其他复杂布局，都能轻松模拟。
• 简单易用：开发者只需简单调用 Skeleton 组件并指定变体和尺寸，即可快速为页面添加加载占位符。

2. 注意事项

• 避免滥用：虽然 Skeleton 能够提升用户体验，但不应在页面中滥用。对于加载速度较快的页面，过多的 Skeleton 反而可能增加视觉复杂性，影响用户的浏览体验。
• 保持样式一致性：确保 Skeleton 的尺寸和实际内容的尺寸一致，以避免加载完成后内容跳动影响用户体验。
• 动画效果：Skeleton 自带动画效果，可以通过设置 animation="wave" 或 animation={false} 来定制动画行为，合理使用动画可以进一步提升用户体验。

六、总结

Skeleton 是 Material-UI 中非常实用且灵活的加载占位符组件，能够显著提升用户在数据加载过程中的体验。通过对不同变体的合理使用，开发者可以轻松构建出更加顺畅、视觉连贯的界面。在实际项目中，充分利用 Skeleton 的强大功能，能够为用户提供更加友好、平滑的加载体验。

推荐：

• JavaScript
• react
• vue

---