【Material-UI】Drawer组件中的Swipeable Edge详解

Material-UI 是 React 生态系统中非常流行的 UI 框架，提供了大量的组件来帮助开发者构建精美的用户界面。在这篇文章中，我们将深入探讨 Material-UI 中的 Swipeable Drawer 组件，重点介绍其 Swipeable Edge 功能，帮助开发者更好地实现流畅的抽屉滑动体验。

一、Swipeable Drawer 组件概述

1. 组件介绍

Swipeable Drawer 是 Material-UI 中一个十分常用的 UI 组件。它用于创建可以从屏幕边缘滑动打开的侧边栏或底部抽屉，广泛应用于移动端或需要隐藏菜单的场景。用户可以通过滑动手势来打开或关闭抽屉，提供了直观的交互方式。

Material-UI 的 Swipeable Drawer 组件具有高度的灵活性，允许用户根据需求自定义样式、行为以及位置。在桌面端，通常使用点击按钮来打开和关闭抽屉，而在移动端，用户则可以通过滑动手势操作。

2. Swipeable Edge 功能

Swipeable Edge 功能是 Swipeable Drawer 组件的一大亮点。它允许开发者配置抽屉关闭时在屏幕边缘显示一小部分内容，让用户直观地知道抽屉的位置，并提供视觉提示，提升用户体验。这个功能特别适合移动端设备，通过滑动操作可以快速访问抽屉。

二、Swipeable Edge的基本用法

在 Material-UI 中，Swipeable Drawer 可以通过一小段代码轻松实现。下面的代码展示了如何使用 Swipeable Edge 来创建一个可滑动的底部抽屉：

import * as React from 'react';
import PropTypes from 'prop-types';
import { Global } from '@emotion/react';
import { styled } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { grey } from '@mui/material/colors';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import Skeleton from '@mui/material/Skeleton';
import Typography from '@mui/material/Typography';
import SwipeableDrawer from '@mui/material/SwipeableDrawer';

const drawerBleeding = 56;

const Root = styled('div')(({ theme }) => ({
  height: '100%',
  backgroundColor: grey[100],
  ...theme.applyStyles('dark', {
    backgroundColor: theme.palette.background.default,
  }),
}));

const StyledBox = styled('div')(({ theme }) => ({
  backgroundColor: '#fff',
  ...theme.applyStyles('dark', {
    backgroundColor: grey[800],
  }),
}));

const Puller = styled('div')(({ theme }) => ({
  width: 30,
  height: 6,
  backgroundColor: grey[300],
  borderRadius: 3,
  position: 'absolute',
  top: 8,
  left: 'calc(50% - 15px)',
  ...theme.applyStyles('dark', {
    backgroundColor: grey[900],
  }),
}));

function SwipeableEdgeDrawer(props) {
  const { window } = props;
  const [open, setOpen] = React.useState(false);

  const toggleDrawer = (newOpen) => () => {
    setOpen(newOpen);
  };

  const container = window !== undefined ? () => window().document.body : undefined;

  return (
    <Root>
      <CssBaseline />
      <Global
        styles={{
          '.MuiDrawer-root > .MuiPaper-root': {
            height: `calc(50% - ${drawerBleeding}px)`,
            overflow: 'visible',
          },
        }}
      />
      <Box sx={{ textAlign: 'center', pt: 1 }}>
        <Button onClick={toggleDrawer(true)}>Open</Button>
      </Box>
      <SwipeableDrawer
        container={container}
        anchor="bottom"
        open={open}
        onClose={toggleDrawer(false)}
        onOpen={toggleDrawer(true)}
        swipeAreaWidth={drawerBleeding}
        disableSwipeToOpen={false}
        ModalProps={{
          keepMounted: true,
        }}
      >
        <StyledBox
          sx={{
            position: 'absolute',
            top: -drawerBleeding,
            borderTopLeftRadius: 8,
            borderTopRightRadius: 8,
            visibility: 'visible',
            right: 0,
            left: 0,
          }}
        >
          <Puller />
          <Typography sx={{ p: 2, color: 'text.secondary' }}>51 results</Typography>
        </StyledBox>
        <StyledBox sx={{ px: 2, pb: 2, height: '100%', overflow: 'auto' }}>
          <Skeleton variant="rectangular" height="100%" />
        </StyledBox>
      </SwipeableDrawer>
    </Root>
  );
}

SwipeableEdgeDrawer.propTypes = {
  window: PropTypes.func,
};

export default SwipeableEdgeDrawer;

在这个例子中，SwipeableDrawer 被配置为底部抽屉（anchor="bottom"），并通过 swipeAreaWidth 设置了抽屉滑动区域的宽度，使得即使在抽屉关闭的情况下，用户也能通过滑动屏幕边缘来打开它。

三、Swipeable Edge的核心参数详解

1. swipeAreaWidth

swipeAreaWidth 是 Swipeable Drawer 中的一个重要参数，它定义了屏幕边缘可以被滑动触发的区域宽度。对于移动端用户来说，这个区域宽度越大，滑动操作越容易，但如果设置过大，可能会影响其他组件的交互。通常设置在 56 像素左右，是一个较为合理的范围。

<SwipeableDrawer
  swipeAreaWidth={drawerBleeding}
/>

2. disableSwipeToOpen

disableSwipeToOpen 参数控制是否禁用滑动手势来打开抽屉。如果设置为 true，则用户无法通过滑动操作来打开抽屉，适合那些只允许通过按钮或其他交互来控制抽屉打开的场景。

<SwipeableDrawer
  disableSwipeToOpen={false}
/>

3. keepMounted

keepMounted 参数确保即使抽屉处于关闭状态，它仍然保持挂载在 DOM 中。这对于提升抽屉组件的性能有帮助，因为它避免了抽屉反复卸载和挂载所带来的性能开销。

<SwipeableDrawer
  ModalProps={{
    keepMounted: true,
  }}
/>

四、Swipeable Edge的实际应用场景

1. 移动端菜单

在移动端应用中，侧边栏菜单或底部导航菜单是非常常见的布局模式。使用 Swipeable Edge 功能，开发者可以轻松实现可滑动的底部或侧边抽屉，提升用户体验。通过在关闭状态下显示一部分抽屉边缘，用户可以直观地察觉到菜单的存在。

2. 动态数据展示

Swipeable Drawer 也适用于展示动态数据，如表单、筛选条件等。当用户在页面上滑动抽屉时，抽屉可以显示更多的详细信息或选项。例如，在电子商务应用中，可以通过 Swipeable Drawer 展示产品筛选条件，并允许用户通过滑动进行选择。

3. 内嵌加载状态

在上面的示例代码中，我们可以看到使用了 Skeleton 组件来作为内容的占位符。这种做法常用于在抽屉加载数据时，给用户提供一个友好的加载体验。在抽屉打开的同时，通过 Skeleton 提供占位符，待数据加载完成后再展示实际内容。

五、Swipeable Drawer的自定义样式

Material-UI 提供了强大的样式定制能力，通过 styled 和 sx 属性，开发者可以轻松调整 Swipeable Drawer 的样式，使其与应用整体风格相匹配。

1. 自定义抽屉颜色

通过修改 StyledBox 组件的背景颜色，可以轻松改变抽屉的外观，使其适应深色或浅色主题。

const StyledBox = styled('div')(({ theme }) => ({
  backgroundColor: '#fff',
  ...theme.applyStyles('dark', {
    backgroundColor: grey[800],
  }),
}));

2. Puller的自定义样式

Puller 是抽屉顶部的一个小条，用户可以通过它轻松地识别并滑动打开抽屉。通过为 Puller 添加自定义样式，可以更好地适应不同的设计需求。

const Puller = styled('div')(({ theme }) => ({
  width: 30,
  height: 6,
  backgroundColor: grey[300],
  borderRadius: 3,
  position: 'absolute',
  top: 8,
  left: 'calc(50% - 15px)',
  ...theme.applyStyles('dark', {
    backgroundColor: grey[900],
  }),
}));

六、总结

Material-UI 的 Swipeable Drawer 组件提供了强大的功能和灵活的定制选项，通过 Swipeable Edge 功能，开发者可以轻松实现用户友好的滑动抽屉交互。无论是移动端还是桌面端应用，Swipeable Drawer 都是一个非常实用的组件，能够显著提升用户体验。希望本文的介绍能够帮助你在项目中更好地使用这个组件。

推荐：

• JavaScript
• react
• vue

---