在现代 web 应用中，App Bar 是一个非常重要的 UI 组件，通常用于显示应用程序的标题、导航链接以及其他相关操作。Material UI 提供了功能强大的 App Bar 组件，能够帮助开发者快速构建具有良好用户体验的导航条。

本文将深入探讨 Material UI 中 App Bar 组件的使用，包括各种属性、方法，以及通过结合其他组件展示不同的使用场景。我们将提供多个示例代码，帮助你全面理解 App Bar 的功能。

1. 什么是 App Bar？

App Bar 是 Material Design 中的一个关键组件，主要用于应用程序的顶端导航。它通常包含：

• 应用名称或标志
• 导航链接
• 操作按钮（如搜索、设置等）
• 用户头像或菜单

2. 安装 Material UI

在开始之前，确保已经安装好 Material UI 库：

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

3. 基本用法

示例：基本的 App Bar

import React from 'react';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';

function BasicAppBar() {
  return (
    <AppBar position="static">
      <Toolbar>
        <Typography variant="h6" sx={{ flexGrow: 1 }}>
          我的应用
        </Typography>
        <Button color="inherit">登录</Button>
      </Toolbar>
    </AppBar>
  );
}

export default BasicAppBar;

示例解析：

• AppBar: 组件的外层容器，通常设置为 position="static" 或 position="fixed"。
• Toolbar: 用于放置应用内容的容器，确保内容在 App Bar 中适当对齐。
• Typography: 用于显示文本，如应用名称。
• Button: 典型的操作按钮，如登录。

4. App Bar 的位置属性

App Bar 具有不同的 position 属性，影响其在页面中的位置。可选值包括：

• static：默认状态，随着页面滚动而滚动。
• fixed：固定在窗口顶部，不随页面滚动而移动。
• absolute：相对定位，可以在特定位置展示。
• sticky：在用户滚动时保持在可视区域内。

示例：固定的 App Bar

function FixedAppBar() {
  return (
    <AppBar position="fixed">
      <Toolbar>
        <Typography variant="h6" sx={{ flexGrow: 1 }}>
          固定的 App Bar
        </Typography>
      </Toolbar>
    </AppBar>
  );
}

示例：绝对定位的 App Bar

function AbsoluteAppBar() {
  return (
    <AppBar position="absolute">
      <Toolbar>
        <Typography variant="h6" sx={{ flexGrow: 1 }}>
          绝对定位的 App Bar
        </Typography>
      </Toolbar>
    </AppBar>
  );
}

5. 结合其他组件

示例：带有图标的 App Bar

import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';

function IconAppBar() {
  return (
    <AppBar position="static">
      <Toolbar>
        <IconButton edge="start" color="inherit" aria-label="menu">
          <MenuIcon />
        </IconButton>
        <Typography variant="h6" sx={{ flexGrow: 1 }}>
          带有图标的 App Bar
        </Typography>
      </Toolbar>
    </AppBar>
  );
}

示例：使用下拉菜单的 App Bar

import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import AccountCircle from '@mui/icons-material/AccountCircle';

function MenuAppBar() {
  const [anchorEl, setAnchorEl] = React.useState(null);

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

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

  return (
    <div>
      <AppBar position="static">
        <Toolbar>
          <Typography variant="h6" sx={{ flexGrow: 1 }}>
            下拉菜单的 App Bar
          </Typography>
          <IconButton
            edge="end"
            aria-label="account"
            aria-controls="menu-appbar"
            aria-haspopup="true"
            onClick={handleMenu}
            color="inherit"
          >
            <AccountCircle />
          </IconButton>
          <Menu
            id="menu-appbar"
            anchorEl={anchorEl}
            anchorOrigin={{
              vertical: 'bottom',
              horizontal: 'right',
            }}
            keepMounted
            transformOrigin={{
              vertical: 'top',
              horizontal: 'right',
            }}
            open={Boolean(anchorEl)}
            onClose={handleClose}
          >
            <MenuItem onClick={handleClose}>个人资料</MenuItem>
            <MenuItem onClick={handleClose}>设置</MenuItem>
            <MenuItem onClick={handleClose}>登出</MenuItem>
          </Menu>
        </Toolbar>
      </AppBar>
    </div>
  );
}

6. 添加样式

可以使用 sx 属性来为 App Bar 添加自定义样式。例如，改变背景色、文字颜色等。

示例：自定义样式的 App Bar

function StyledAppBar() {
  return (
    <AppBar position="static" sx={{ backgroundColor: '#2196F3' }}>
      <Toolbar>
        <Typography variant="h6" sx={{ flexGrow: 1, color: 'white' }}>
          自定义样式的 App Bar
        </Typography>
      </Toolbar>
    </AppBar>
  );
}

7. 响应式设计

Material UI 的 App Bar 可以根据屏幕大小调整内容。例如，使用 Drawer 组件实现移动设备上的导航。

示例：响应式 App Bar

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

function ResponsiveAppBar() {
  const [drawerOpen, setDrawerOpen] = useState(false);

  const toggleDrawer = (open) => (event) => {
    if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
      return;
    }
    setDrawerOpen(open);
  };

  return (
    <div>
      <AppBar position="static">
        <Toolbar>
          <IconButton edge="start" color="inherit" onClick={toggleDrawer(true)} aria-label="menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" sx={{ flexGrow: 1 }}>
            响应式 App Bar
          </Typography>
        </Toolbar>
      </AppBar>
      <Drawer anchor="left" open={drawerOpen} onClose={toggleDrawer(false)}>
        <div
          role="presentation"
          onClick={toggleDrawer(false)}
          onKeyDown={toggleDrawer(false)}
        >
          <Typography variant="h6" sx={{ padding: 2 }}>
            导航链接
          </Typography>
          <Typography>链接 1</Typography>
          <Typography>链接 2</Typography>
          <Typography>链接 3</Typography>
        </div>
      </Drawer>
    </div>
  );
}

8. 总结

在本篇博客中，我们深入探讨了 Material UI 中 App Bar 组件的多种使用方式，包括基本用法、位置属性、结合其他组件、样式定制和响应式设计。App Bar 是构建用户友好的界面不可或缺的部分，通过合理运用 App Bar，可以显著提升用户体验。

希望这些示例能够帮助你在自己的项目中更好地使用 Material UI 的 App Bar 组件，构建出更加优雅和实用的应用程序界面。如果你对其他 Material UI 组件感兴趣，请继续关注我们的系列文章。