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

Material-UI 是 React 生态系统中备受欢迎的 UI 框架，提供了丰富的组件库，帮助开发者构建现代化的用户界面。本文将深入介绍 Material-UI 中的 Drawer 组件，特别是其 Persistent Drawer（持久化抽屉）的使用。Persistent Drawer 可以在用户界面中提供始终可访问的导航菜单，提升用户体验。

一、Drawer 组件概述

1. 组件介绍

Drawer（抽屉）组件是一种常用于实现侧边栏导航的 UI 元素，允许在屏幕的一侧滑出一个面板，用于显示导航链接或其他内容。Material-UI 的 Drawer 组件具有高度的灵活性，可以根据不同的需求配置成临时（temporary）、永久（permanent）或持久化（persistent）等多种类型。

2. Persistent Drawer 的作用

Persistent Drawer（持久化抽屉）是一种特殊类型的 Drawer，它可以在打开和关闭状态之间切换，并在应用的各个部分保持其状态。与临时抽屉不同，持久化抽屉在打开时会推动主内容区，让出空间以容纳抽屉的宽度。这样可以确保导航栏始终可用，而不遮挡主要内容。

二、Persistent Drawer 的基本用法

以下代码展示了如何在 Material-UI 中实现一个简单的 Persistent Drawer：

import * as React from 'react';
import { styled, useTheme } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Drawer from '@mui/material/Drawer';
import CssBaseline from '@mui/material/CssBaseline';
import MuiAppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import List from '@mui/material/List';
import Typography from '@mui/material/Typography';
import Divider from '@mui/material/Divider';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
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 InboxIcon from '@mui/icons-material/MoveToInbox';
import MailIcon from '@mui/icons-material/Mail';

const drawerWidth = 240;

const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(
  ({ theme, open }) => ({
    flexGrow: 1,
    padding: theme.spacing(3),
    transition: theme.transitions.create('margin', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    marginLeft: `-${drawerWidth}px`,
    ...(open && {
      transition: theme.transitions.create('margin', {
        easing: theme.transitions.easing.easeOut,
        duration: theme.transitions.duration.enteringScreen,
      }),
      marginLeft: 0,
    }),
  }),
);

const AppBar = styled(MuiAppBar, {
  shouldForwardProp: (prop) => prop !== 'open',
})(({ theme, open }) => ({
  transition: theme.transitions.create(['margin', 'width'], {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.leavingScreen,
  }),
  ...(open && {
    width: `calc(100% - ${drawerWidth}px)`,
    marginLeft: `${drawerWidth}px`,
    transition: theme.transitions.create(['margin', 'width'], {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen,
    }),
  }),
}));

const DrawerHeader = styled('div')(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
  padding: theme.spacing(0, 1),
  ...theme.mixins.toolbar,
  justifyContent: 'flex-end',
}));

export default function PersistentDrawerLeft() {
  const theme = useTheme();
  const [open, setOpen] = React.useState(false);

  const handleDrawerOpen = () => {
    setOpen(true);
    // 可以在这里添加逻辑来记住抽屉的状态，例如存储在 localStorage 中
  };

  const handleDrawerClose = () => {
    setOpen(false);
    // 同样，可以在这里更新抽屉的状态
  };

  return (
    <Box sx={{ display: 'flex' }}>
      <CssBaseline />
      <AppBar position="fixed" open={open}>
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            onClick={handleDrawerOpen}
            edge="start"
            sx={{
              marginRight: '36px',
              ...(open && { display: 'none' }),
            }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" noWrap component="div">
            Persistent Drawer
          </Typography>
        </Toolbar>
      </AppBar>
      <Drawer
        sx={{
          width: drawerWidth,
          flexShrink: 0,
          '& .MuiDrawer-paper': {
            width: drawerWidth,
          },
        }}
        variant="persistent"
        anchor="left"
        open={open}
      >
        <DrawerHeader>
          <IconButton onClick={handleDrawerClose}>
            {theme.direction === 'ltr' ? (
              <ChevronLeftIcon />
            ) : (
              <ChevronRightIcon />
            )}
          </IconButton>
        </DrawerHeader>
        <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>
      </Drawer>
      <Main open={open}>
        <DrawerHeader />
        <Typography paragraph>
          这里是主要内容区域。在抽屉打开和关闭时，内容区域会根据抽屉的宽度自动调整。
        </Typography>
        <Typography paragraph>
          你可以在这里添加你的主要应用内容。Persistent Drawer 会记住用户的操作，下次打开应用时，抽屉的状态会保持不变。
        </Typography>
      </Main>
    </Box>
  );
}

三、Persistent Drawer 的核心概念详解

1. variant="persistent"

在 Drawer 组件中，variant 属性决定了抽屉的类型。设置为 "persistent" 时，抽屉会在打开和关闭之间切换，但在打开时会推挤主内容区，使其为抽屉让出空间。这与 "temporary" 类型不同，后者会浮在内容之上，不会影响主内容的布局。

<Drawer
  variant="persistent"
  open={open}
  // 其他属性
>
  {/* 抽屉内容 */}
</Drawer>

2. 状态管理

使用 React 的 useState 钩子管理抽屉的打开和关闭状态：

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

const handleDrawerOpen = () => {
  setOpen(true);
};

const handleDrawerClose = () => {
  setOpen(false);
};

3. 自定义 AppBar 和 Main 区域

通过 styled 函数和 shouldForwardProp，我们可以根据抽屉的状态动态调整 AppBar 和 Main 区域的样式。例如，当抽屉打开时，AppBar 的宽度会减少，Main 区域的 margin-left 会变为 0。

const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(
  // 样式定义
);

4. 记住抽屉状态

Persistent Drawer 的特点之一是会记住抽屉的状态，从一个动作到另一个动作，甚至从一个会话到另一个会话。你可以使用浏览器的 localStorage 或其他持久化存储方法来实现这一功能。

// 示例：在打开和关闭函数中添加存储逻辑
const handleDrawerOpen = () => {
  setOpen(true);
  localStorage.setItem('drawerOpen', 'true');
};

const handleDrawerClose = () => {
  setOpen(false);
  localStorage.setItem('drawerOpen', 'false');
};

// 在组件加载时读取状态
React.useEffect(() => {
  const savedState = localStorage.getItem('drawerOpen') === 'true';
  setOpen(savedState);
}, []);

四、Persistent Drawer 的实际应用场景

1. 后台管理系统

在后台管理系统中，侧边栏导航是常见的设计。使用 Persistent Drawer，可以让用户在不同的页面之间导航时，侧边栏的状态保持一致，提升用户体验。

2. 需要记忆导航状态的应用

对于需要记住用户偏好的应用，例如电商网站的分类筛选，Persistent Drawer 可以在用户浏览商品时保持打开状态，方便用户随时更改筛选条件。

3. 大屏幕设备上的导航

在桌面设备或大屏幕上，Persistent Drawer 可以始终保持打开状态，为用户提供持续的导航支持，同时内容区域根据抽屉的状态动态调整，保证布局的美观和实用性。

五、注意事项

1. 响应式设计

在移动设备上，Persistent Drawer 可能并不是最佳选择，因为它会占用屏幕空间。你可以结合响应式设计，在小屏幕上使用 temporary 抽屉，在大屏幕上使用 persistent 抽屉。

<Drawer
  variant={isMobile ? 'temporary' : 'persistent'}
  // 其他属性
>
  {/* 抽屉内容 */}
</Drawer>

2. 动画和过渡效果

为了提供更好的用户体验，可以利用 Material-UI 提供的过渡效果，让抽屉的打开和关闭更加流畅。本文代码示例已经通过 theme.transitions.create 实现了动画效果。

3. 可访问性

确保为抽屉的打开和关闭按钮添加合适的 aria 属性，提高组件的可访问性。

<IconButton
  color="inherit"
  aria-label="open drawer"
  onClick={handleDrawerOpen}
  // 其他属性
>
  <MenuIcon />
</IconButton>

六、总结

Material-UI 的 Persistent Drawer 组件为开发者提供了一个强大而灵活的工具，可以在应用中实现持久化的侧边栏导航。通过合理的状态管理和样式定制，Persistent Drawer 可以提升用户体验，满足不同应用场景的需求。在实际项目中，开发者应根据具体的需求和用户习惯，选择合适的 Drawer 类型，并结合响应式设计，打造优秀的用户界面。

推荐：

• JavaScript
• react
• vue

---