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

Material-UI 是 React 生态系统中非常流行的 UI 框架，提供了大量的组件来帮助开发者构建现代化的用户界面。在复杂布局中，Drawer 组件常用于创建可滑出的侧边栏，为导航和内容显示提供灵活的解决方案。本文将深入探讨 Material-UI 中 Responsive Drawer 的使用，特别是在不同屏幕尺寸下如何自适应布局。

一、Drawer 组件概述

1. 组件介绍

Drawer 是 Material-UI 提供的一个滑动面板组件，通常用于实现侧边栏导航或其他内容区域。该组件非常灵活，可以根据屏幕尺寸的变化呈现不同的显示模式。例如，在较大的屏幕上，Drawer 可以始终显示为固定侧边栏，而在移动端小屏设备上，Drawer 可以以可滑动的方式出现。

2. Responsive Drawer 的核心概念

Responsive Drawer 的核心在于根据设备屏幕的宽度动态调整 Drawer 的显示方式。在小屏幕上，Drawer 通常设置为 temporary 模式，即点击菜单图标时出现，关闭时自动隐藏。而在大屏幕设备上，Drawer 可以设置为 permanent 模式，始终显示在界面的一侧。

二、如何实现Responsive Drawer

1. 基本实现

通过以下代码，我们可以实现一个简单的 Responsive Drawer：

import * as React from 'react';
import PropTypes from 'prop-types';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import CssBaseline from '@mui/material/CssBaseline';
import Divider from '@mui/material/Divider';
import Drawer from '@mui/material/Drawer';
import IconButton from '@mui/material/IconButton';
import InboxIcon from '@mui/icons-material/MoveToInbox';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import MailIcon from '@mui/icons-material/Mail';
import MenuIcon from '@mui/icons-material/Menu';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';

const drawerWidth = 240;

function ResponsiveDrawer(props) {
  const { window } = props;
  const [mobileOpen, setMobileOpen] = React.useState(false);

  const handleDrawerToggle = () => {
    setMobileOpen(!mobileOpen);
  };

  const drawer = (
    <div>
      <Toolbar />
      <Divider />
      <List>
        {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
          <ListItem key={text} disablePadding>
            <ListItemButton>
              <ListItemIcon>
                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
              </ListItemIcon>
              <ListItemText primary={text} />
            </ListItemButton>
          </ListItem>
        ))}
      </List>
      <Divider />
      <List>
        {['All mail', 'Trash', 'Spam'].map((text, index) => (
          <ListItem key={text} disablePadding>
            <ListItemButton>
              <ListItemIcon>
                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
              </ListItemIcon>
              <ListItemText primary={text} />
            </ListItemButton>
          </ListItem>
        ))}
      </List>
    </div>
  );

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

  return (
    <Box sx={{ display: 'flex' }}>
      <CssBaseline />
      <AppBar
        position="fixed"
        sx={{
          width: { sm: `calc(100% - ${drawerWidth}px)` },
          ml: { sm: `${drawerWidth}px` },
        }}
      >
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            edge="start"
            onClick={handleDrawerToggle}
            sx={{ mr: 2, display: { sm: 'none' } }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" noWrap component="div">
            Responsive drawer
          </Typography>
        </Toolbar>
      </AppBar>
      <Box
        component="nav"
        sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
        aria-label="mailbox folders"
      >
        <Drawer
          container={container}
          variant="temporary"
          open={mobileOpen}
          onClose={handleDrawerToggle}
          ModalProps={{
            keepMounted: true, // 提高在移动设备上的性能
          }}
          sx={{
            display: { xs: 'block', sm: 'none' },
            '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
          }}
        >
          {drawer}
        </Drawer>
        <Drawer
          variant="permanent"
          sx={{
            display: { xs: 'none', sm: 'block' },
            '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
          }}
          open
        >
          {drawer}
        </Drawer>
      </Box>
      <Box
        component="main"
        sx={{ flexGrow: 1, p: 3, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
      >
        <Toolbar />
        <Typography>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.
        </Typography>
      </Box>
    </Box>
  );
}

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

export default ResponsiveDrawer;

2. 代码详解

1. AppBar 和 Drawer 组合

在该示例中，AppBar 组件用于在屏幕顶部显示应用标题及导航按钮。当在小屏幕上使用时，通过点击 MenuIcon 图标，Drawer 将会滑出展示。在大屏幕上，Drawer 始终保持可见并固定在页面左侧。

2. drawerWidth 的定义

drawerWidth 设置为 240px，代表了 Drawer 的宽度。这是一个常见的宽度，但你可以根据 UI 需求自行调整。

3. mobileOpen 的状态管理

mobileOpen 作为状态变量，用于管理在小屏幕下 Drawer 的开关状态。当 mobileOpen 为 true 时，Drawer 将打开，反之则关闭。

4. Drawer 的两种变体

在该代码中，我们使用了两种不同的 Drawer 变体：

• temporary：用于移动设备，当 mobileOpen 为 true 时显示。
• permanent：用于桌面设备，始终显示在页面左侧。

通过 sx 属性中的 display 条件渲染，我们根据屏幕大小显示不同的 Drawer。xs: 'block' 和 sm: 'none' 组合确保了 temporary Drawer 仅在小屏幕上显示，反之 permanent Drawer 仅在大屏幕上显示。

5. 响应式布局

使用 @mui/system 提供的 sx 属性，我们可以非常轻松地实现响应式布局。通过对 sm 和 xs 进行不同的设置，开发者可以确保在不同尺寸的屏幕上，Drawer 以最佳的方式呈现。

3. 动画与性能优化

在移动设备上，ModalProps 的 keepMounted 属性设置为 true，以提高打开 Drawer 的性能。这可以避免 Drawer 在关闭时被卸载，减少重新加载时的延迟。

三、实际应用场景

1. 管理系统侧边栏

在企业级的管理系统中，Drawer 常用于导航栏。大多数系统会根据设备屏幕宽度动态调整导航栏的展示方式。例如，在桌面设备上，导航栏固定在左侧显示，用户可以快速访问各个页面。而在移动设备上，导航栏则会隐藏在屏幕外，通过点击按钮唤出。

2. 移动端应用

在移动端应用中，屏幕空间非常宝贵，因此使用 temporary 形式的 Drawer 是常见的选择。用户点击按钮后可以滑出侧边栏，并在选择后自动隐藏。这样既保留了功能的完整性，也确保了内容展示的简洁。

四、总结

Material-UI 的 Responsive Drawer 组件为开发者提供了一个强大的工具，能够根据设备的屏幕尺寸动态调整布局，确保用户体验的一致性与流畅性。在现代前端开发中，响应式设计是不可或缺的一部分，而 Responsive Drawer 的灵活性与简便性，正好满足了这一需求。

推荐：

• JavaScript
• react
• vue

---