Drawer（抽屉）是 Material UI 中的一个重要组件，用于在应用中提供侧边导航或菜单。它可以通过滑入和滑出的动画来显示隐藏的内容，是创建响应式用户界面的重要组成部分。在这篇文章中，我们将详细介绍 Drawer 的使用，包括其属性、方法、示例代码以及与其他组件的结合使用。

1. 什么是 Drawer？

Drawer 是一种可滑动的面板，通常用于显示应用的导航菜单、操作面板或其他辅助信息。它可以是临时的（例如，移动设备上使用的滑出菜单），也可以是永久的（例如，桌面应用中的侧边栏）。

2. 安装 Material UI

确保你的项目中已经安装了 Material UI。如果尚未安装，请使用以下命令：

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

3. 基本用法

示例：基础的 Drawer

import React from 'react';
import Drawer from '@mui/material/Drawer';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';

function BasicDrawer() {
  const [open, setOpen] = React.useState(false);

  const toggleDrawer = () => {
    setOpen(!open);
  };

  return (
    <div>
      <AppBar position="static">
        <Toolbar>
          <IconButton edge="start" color="inherit" onClick={toggleDrawer}>
            <MenuIcon />
          </IconButton>
          <Typography variant="h6">我的应用</Typography>
        </Toolbar>
      </AppBar>
      <Drawer open={open} onClose={toggleDrawer}>
        <div
          role="presentation"
          onClick={toggleDrawer}
          onKeyDown={toggleDrawer}
        >
          <Typography variant="h6">导航菜单</Typography>
          <Typography>链接1</Typography>
          <Typography>链接2</Typography>
          <Typography>链接3</Typography>
        </div>
      </Drawer>
    </div>
  );
}

export default BasicDrawer;

示例解析：

• 状态管理：使用 useState 来控制 Drawer 的打开和关闭状态。
• AppBar：在 Drawer 组件上方放置一个 AppBar，其中包含一个菜单图标。
• Drawer：使用 open 属性来控制 Drawer 是否显示。

4. Drawer 的属性

常用属性

• open: 布尔值，表示 Drawer 是否打开。
• onClose: 函数，当 Drawer 关闭时触发。
• anchor: 定义 Drawer 显示的方向，取值为 top、right、bottom、left。
• variant: 定义 Drawer 的变体，取值为 temporary、persistent、permanent。
• sx: 自定义样式。

示例：自定义 Drawer 方向

function DirectionalDrawer() {
  const [open, setOpen] = React.useState(false);

  const toggleDrawer = () => {
    setOpen(!open);
  };

  return (
    <div>
      <IconButton edge="start" color="inherit" onClick={toggleDrawer}>
        <MenuIcon />
      </IconButton>
      <Drawer anchor="right" open={open} onClose={toggleDrawer}>
        <div
          role="presentation"
          onClick={toggleDrawer}
          onKeyDown={toggleDrawer}
        >
          <Typography variant="h6">右侧菜单</Typography>
        </div>
      </Drawer>
    </div>
  );
}

示例解析：

• 通过设置 anchor 属性为 "right"，将 Drawer 设为从右侧滑出。

5. Drawer 的变体

临时 Drawer

临时 Drawer 适用于移动设备，通常是全屏覆盖。

<Drawer variant="temporary" open={open} onClose={toggleDrawer}>
  <div
    role="presentation"
    onClick={toggleDrawer}
    onKeyDown={toggleDrawer}
  >
    <Typography variant="h6">临时菜单</Typography>
  </div>
</Drawer>

持久性 Drawer

持久性 Drawer 用于桌面应用程序，允许用户在页面上固定菜单。

<Drawer variant="persistent" open={open}>
  <div>
    <Typography variant="h6">持久性菜单</Typography>
  </div>
</Drawer>

永久 Drawer

永久性 Drawer 在桌面上始终可见，适用于需要常规导航的应用。

<Drawer variant="permanent">
  <div>
    <Typography variant="h6">永久菜单</Typography>
  </div>
</Drawer>

6. 响应式 Drawer

示例：响应式 Drawer

import Container from '@mui/material/Container';
import Hidden from '@mui/material/Hidden';

function ResponsiveDrawer() {
  const [open, setOpen] = React.useState(false);

  const toggleDrawer = () => {
    setOpen(!open);
  };

  return (
    <Container>
      <IconButton edge="start" color="inherit" onClick={toggleDrawer}>
        <MenuIcon />
      </IconButton>
      <Hidden mdUp>
        <Drawer variant="temporary" open={open} onClose={toggleDrawer}>
          <div
            role="presentation"
            onClick={toggleDrawer}
            onKeyDown={toggleDrawer}
          >
            <Typography variant="h6">响应式菜单</Typography>
          </div>
        </Drawer>
      </Hidden>
      <Hidden smDown>
        <Drawer variant="persistent" open>
          <div>
            <Typography variant="h6">持久性菜单</Typography>
          </div>
        </Drawer>
      </Hidden>
    </Container>
  );
}

示例解析：

• 使用 Hidden 组件根据屏幕尺寸控制 Drawer 的显示方式，确保适配移动设备和桌面设备。

7. Drawer 与 Router 结合使用

示例：使用 React Router 的 Drawer

import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';

function App() {
  const [open, setOpen] = React.useState(false);

  const toggleDrawer = () => {
    setOpen(!open);
  };

  return (
    <Router>
      <IconButton edge="start" color="inherit" onClick={toggleDrawer}>
        <MenuIcon />
      </IconButton>
      <Drawer open={open} onClose={toggleDrawer}>
        <div
          role="presentation"
          onClick={toggleDrawer}
          onKeyDown={toggleDrawer}
        >
          <Link to="/">首页</Link>
          <Link to="/about">关于</Link>
        </div>
      </Drawer>
      <Switch>
        <Route path="/about">
          <AboutPage />
        </Route>
        <Route path="/">
          <HomePage />
        </Route>
      </Switch>
    </Router>
  );
}

示例解析：

• 将 Drawer 与 React Router 结合，使导航更具动态性。

8. 结合 Icon 使用

示例：在 Drawer 中使用 Icon

import HomeIcon from '@mui/icons-material/Home';
import InfoIcon from '@mui/icons-material/Info';

function IconDrawer() {
  return (
    <Drawer open={open} onClose={toggleDrawer}>
      <div>
        <Link to="/">
          <HomeIcon /> 首页
        </Link>
        <Link to="/about">
          <InfoIcon /> 关于
        </Link>
      </div>
    </Drawer>
  );
}

示例解析：

• 通过在 Drawer 中添加图标，增强了菜单的视觉效果。

9. 结论

在本文中，我们详细探讨了 Material UI 中的 Drawer 组件，包括其基本用法、属性、变体、响应式设计、与 Router 的结合以及图标的使用示例。Drawer 是一个非常灵活且强大的组件，可以帮助你构建出色的用户界面。

希望这些示例能帮助你更好地理解和使用 Drawer 组件，为你的应用提供良好的导航体验。如果你对 Material UI 的其他组件感兴趣，欢迎继续关注我们的系列文章。