【Material-UI】App Bar with Menu 详解

Material-UI 是 React 生态中非常流行的 UI 框架，提供了大量丰富的组件，帮助开发者快速构建优秀的用户界面。App Bar 是应用中常见的导航栏组件，通常用于展示标题、菜单和操作按钮。本文将详细介绍如何在 Material-UI 中使用 App Bar with Menu，实现一个带菜单功能的导航栏。

一、App Bar 组件概述

1. 组件介绍

App Bar 是 Material-UI 中的一个顶级导航栏组件，通常位于页面顶部，主要用于展示应用标题、导航菜单或其他常用操作按钮。这个组件能够轻松定制风格和功能，是许多应用中不可或缺的部分。

2. 使用场景

在一个现代化的 web 应用中，App Bar 往往用于页面的全局导航部分。它可以包含应用标题、侧边栏菜单按钮、用户头像和相关操作（如登录/登出），让用户可以轻松访问不同的功能模块。

二、App Bar with Menu 实现

1. 基本结构

我们将通过 App Bar 结合 Menu 组件，实现一个包含用户菜单和登出功能的导航栏。具体代码如下：

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
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';
import AccountCircle from '@mui/icons-material/AccountCircle';
import Switch from '@mui/material/Switch';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormGroup from '@mui/material/FormGroup';
import MenuItem from '@mui/material/MenuItem';
import Menu from '@mui/material/Menu';

export default function MenuAppBar() {
  const [auth, setAuth] = React.useState(true);
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleChange = (event) => {
    setAuth(event.target.checked);
  };

  const handleMenu = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <Box sx={{ flexGrow: 1 }}>
      <FormGroup>
        <FormControlLabel
          control={
            <Switch
              checked={auth}
              onChange={handleChange}
              aria-label="login switch"
            />
          }
          label={auth ? 'Logout' : 'Login'}
        />
      </FormGroup>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            Photos
          </Typography>
          {auth && (
            <div>
              <IconButton
                size="large"
                aria-label="account of current user"
                aria-controls="menu-appbar"
                aria-haspopup="true"
                onClick={handleMenu}
                color="inherit"
              >
                <AccountCircle />
              </IconButton>
              <Menu
                id="menu-appbar"
                anchorEl={anchorEl}
                anchorOrigin={{
                  vertical: 'top',
                  horizontal: 'right',
                }}
                keepMounted
                transformOrigin={{
                  vertical: 'top',
                  horizontal: 'right',
                }}
                open={Boolean(anchorEl)}
                onClose={handleClose}
              >
                <MenuItem onClick={handleClose}>Profile</MenuItem>
                <MenuItem onClick={handleClose}>My account</MenuItem>
              </Menu>
            </div>
          )}
        </Toolbar>
      </AppBar>
    </Box>
  );
}

2. 主要组件解析

• AppBar：这是导航栏的核心组件，包含导航栏中的所有元素。position="static" 设置了其在页面中的位置为固定在顶部。
• Toolbar：用于在 AppBar 中布局内容，可以包含按钮、文字、图标等元素。
• IconButton：按钮组件，MenuIcon 作为图标展示在导航栏的左侧，点击后通常用于打开侧边栏或菜单。
• Typography：显示导航栏中的标题内容，本文中的例子为 “Photos”。
• Switch：开关组件，用于切换登录状态，auth 变量控制用户是否登录。
• Menu：弹出菜单组件，当用户点击头像图标时会打开，菜单项包含用户的个人资料和账户相关选项。

三、App Bar 功能详解

1. 用户登录状态切换

通过使用 Switch 组件，我们可以轻松切换用户的登录状态。auth 状态变量用于存储当前用户的登录状态。当用户点击开关按钮时，登录状态将会发生变化，导航栏也随之调整显示内容。

2. 打开/关闭菜单功能

handleMenu 函数用于处理当用户点击头像图标时打开菜单的操作，通过设置 anchorEl 为当前元素触发菜单的显示。handleClose 则在用户关闭菜单时调用，将 anchorEl 重置为 null，从而关闭菜单。

3. 自定义菜单项

Menu 组件包含多个 MenuItem，每一个 MenuItem 代表一个菜单选项。你可以根据需求自定义菜单内容，比如添加 “Profile” 和 “My account” 这样的选项。点击任一选项时，会调用 handleClose 关闭菜单。

4. 响应式设计

通过 Material-UI 的强大功能，App Bar 天生具备响应式设计。当屏幕宽度变化时，导航栏和菜单可以自适应布局，保证在不同设备上的用户体验。

四、App Bar with Menu 的实际应用场景

1. 应用程序的全局导航

在大型应用中，App Bar 通常作为全局导航使用。结合 Menu 组件，开发者可以提供登录用户的个人设置、登出功能等关键操作。例如，在电子商务平台中，用户可以通过导航栏快速访问个人订单、购物车、收藏夹等。

2. 移动端应用

由于 App Bar 天生具备良好的响应式设计能力，因此在移动端应用中非常适合用作顶部导航。通过结合 MenuIcon，用户可以在移动设备上打开菜单，从而访问更多功能。

五、总结

Material-UI 的 App Bar 组件是一个强大的工具，能够帮助开发者快速实现具有现代感的导航栏。通过结合 Menu 和其他 Material-UI 组件，开发者可以为用户提供方便的操作体验。无论是桌面端还是移动端，App Bar with Menu 都能够通过其简洁的设计和灵活的功能来提升应用的整体用户体验。

推荐：

• JavaScript
• react
• vue

---