【Material-UI】Drawer中的 Permanent Drawer 详解

Material-UI 是 React 中非常流行的 UI 框架，提供了丰富的组件库，其中的 Drawer 组件用于创建侧边栏导航布局。本文将详细介绍 Drawer 组件中的 Permanent Drawer（永久抽屉），并探讨其在桌面端应用中的使用场景与实现方法。

一、Drawer 组件概述

1. 组件简介

Material-UI 的 Drawer 组件是一种用于实现侧边导航栏的布局工具。它支持多种形式的侧边栏，包括永久抽屉（Permanent Drawer）、临时抽屉（Temporary Drawer）和响应式抽屉（Responsive Drawer）。Drawer 组件通常用于大型应用的导航，帮助用户快速切换不同的视图或功能模块。

2. Permanent Drawer 的定义

Permanent Drawer 顾名思义，是一种始终显示在页面左侧的抽屉导航栏，与其他内容处于同一层级。它适用于桌面端应用，特别是那些信息密集且用户需要频繁使用导航栏的应用。Permanent Drawer 是桌面端应用的默认推荐选项，因为它始终保持可见，提供了稳定的导航体验。

二、Permanent Drawer 的特性与应用场景

1. 永久可见的导航栏

Permanent Drawer 始终固定在页面的左侧，即使用户滚动页面或进行其他操作，抽屉栏也不会消失。这使得用户能够快速访问应用的各个模块，而不需要来回切换或展开导航栏。特别是在信息密集型的应用中，如后台管理系统或数据分析平台，保持导航栏的可见性尤为重要。

2. 高度与内容的一致性

在 Material-UI 的设计规范中，Permanent Drawer 的高度通常与页面内容的高度一致。这意味着它通常是全高的，这样不仅保证了视觉上的平衡，还能提供更多的空间用于展示多层级的导航选项。

3. 桌面端的默认推荐

Permanent Drawer 是 Material-UI 为桌面应用推荐的默认导航栏形式。桌面应用通常有足够的屏幕空间，用户也习惯于在侧边找到常驻的导航栏。因此，Permanent Drawer 是这类应用最理想的选择。

三、Permanent Drawer 的基本用法

在 Material-UI 中，创建一个 Permanent Drawer 只需几个简单的步骤。以下是一个典型的 Permanent Drawer 实现示例：

1. 基本实现代码

import * as React from 'react';
import Box from '@mui/material/Box';
import Drawer from '@mui/material/Drawer';
import CssBaseline from '@mui/material/CssBaseline';
import AppBar 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 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;

export default function PermanentDrawerLeft() {
  return (
    <Box sx={{ display: 'flex' }}>
      <CssBaseline />
      <AppBar
        position="fixed"
        sx={{ width: `calc(100% - ${drawerWidth}px)`, ml: `${drawerWidth}px` }}
      >
        <Toolbar>
          <Typography variant="h6" noWrap component="div">
            Permanent drawer
          </Typography>
        </Toolbar>
      </AppBar>
      <Drawer
        sx={{
          width: drawerWidth,
          flexShrink: 0,
          '& .MuiDrawer-paper': {
            width: drawerWidth,
            boxSizing: 'border-box',
          },
        }}
        variant="permanent"
        anchor="left"
      >
        <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>
      </Drawer>
      <Box
        component="main"
        sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
      >
        <Toolbar />
        <Typography>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
          enim praesent elementum facilisis leo vel.
        </Typography>
      </Box>
    </Box>
  );
}

2. 代码详解

1. AppBar 和 Drawer 的布局

在这个示例中，AppBar 和 Drawer 一同构成了页面的顶部导航栏和侧边栏。使用 AppBar 创建固定的顶部栏，并通过 sx 属性调整其宽度，确保左侧的 Drawer 始终固定。

2. Drawer 的永久显示

通过设置 Drawer 的 variant 属性为 permanent，实现永久显示效果。同时，anchor="left" 确保抽屉栏固定在页面左侧。

3. 列表的展示

List 组件用于展示导航栏中的各个选项，每个选项通过 ListItem 进行封装，使用 ListItemButton 和 ListItemIcon 来实现点击效果和图标显示。这里通过简单的 InboxIcon 和 MailIcon 来区分不同的选项。

四、Permanent Drawer 的样式自定义

Material-UI 的 Drawer 组件高度可定制，可以根据需求调整其样式、宽度以及与页面其他元素的配合。以下是一些常见的自定义需求和实现方式：

1. 调整 Drawer 的宽度

默认情况下，Drawer 的宽度为 240 像素。你可以通过修改 drawerWidth 常量来自定义宽度。

const drawerWidth = 300; // 将宽度设为 300px

2. 修改导航栏的颜色

可以通过自定义 AppBar 和 Drawer 的 sx 属性来修改颜色。例如，可以将导航栏的背景色设置为深色调：

<AppBar
  sx={{ backgroundColor: '#333', width: `calc(100% - ${drawerWidth}px)` }}
>

五、使用场景分析

1. 信息消费类应用

Permanent Drawer 非常适合那些以信息消费为主的应用，例如新闻网站、博客管理系统等。用户可以通过侧边栏快速切换不同的内容模块，无需反复展开和关闭导航栏。

2. 数据密集型应用

对于如数据分析平台、后台管理系统等需要频繁导航的应用，Permanent Drawer 提供了更高效的操作体验。侧边导航栏始终可见，用户能够快速在不同的数据表和功能模块之间切换，提高工作效率。

六、结论

Material-UI 的 Permanent Drawer 是一种非常实用的桌面端导航解决方案，适用于各种信息密集型应用。它通过始终保持可见的导航栏，提供了稳定且高效的用户体验。同时，Material-UI 提供了丰富的定制选项，使得开发者能够根据项目需求灵活调整抽屉的样式和行为。

推荐：

• JavaScript
• react
• vue

---