【Material-UI】App Bar 中的 Bottom App Bar 详解

Material-UI 是 React 生态系统中的顶尖 UI 库之一，它提供了丰富的组件库，帮助开发者快速构建用户界面。App Bar 作为 Material-UI 中常用的导航组件之一，不仅可以用于顶部导航，还可以用于底部导航，称为 Bottom App Bar。本文将详细介绍 Material-UI 中 Bottom App Bar 的使用场景、基本结构以及如何结合其他组件打造出灵活多变的用户界面。

一、Bottom App Bar 概述

1. 什么是 App Bar？

App Bar，中文称为“应用栏”，是网页或应用中常见的导航元素。它通常位于页面的顶部或者底部，包含了菜单按钮、图标、搜索框、标题等常见的交互元素。通过 App Bar，用户可以方便地访问重要功能和页面。

2. Bottom App Bar 的作用

Bottom App Bar 是将 App Bar 放置于页面底部的设计模式，适用于移动端或网页应用的底部导航栏。它能有效利用屏幕下方的空间，适合放置主菜单、搜索按钮、功能按钮等常用操作。

二、Bottom App Bar 的基本结构与实现

在 Material-UI 中，使用 AppBar 组件可以非常方便地实现 Bottom App Bar。以下是一个简单的代码示例，展示了如何通过 AppBar 组件创建一个固定在页面底部的导航栏。

import * as React from 'react';
import { styled } from '@mui/material/styles';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import CssBaseline from '@mui/material/CssBaseline';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import Paper from '@mui/material/Paper';
import Fab from '@mui/material/Fab';
import MenuIcon from '@mui/icons-material/Menu';
import AddIcon from '@mui/icons-material/Add';
import SearchIcon from '@mui/icons-material/Search';
import MoreIcon from '@mui/icons-material/MoreVert';

1. 代码解析

在这个例子中，我们使用了 AppBar 组件将导航栏固定在页面的底部，并添加了几个常见的操作按钮。AppBar 通过 position="fixed" 属性将其固定在页面底部，而 sx={{ top: 'auto', bottom: 0 }} 样式确保导航栏始终位于底部。

Toolbar 是一个容器，通常包含按钮、标题、图标等元素。在该示例中，我们使用了 IconButton 组件来添加图标按钮，这些按钮可以实现如打开菜单、搜索、或其他功能的操作。

<AppBar position="fixed" color="primary" sx={{ top: 'auto', bottom: 0 }}>
  <Toolbar>
    <IconButton color="inherit" aria-label="open drawer">
      <MenuIcon />
    </IconButton>
    <StyledFab color="secondary" aria-label="add">
      <AddIcon />
    </StyledFab>
    <Box sx={{ flexGrow: 1 }} />
    <IconButton color="inherit">
      <SearchIcon />
    </IconButton>
    <IconButton color="inherit">
      <MoreIcon />
    </IconButton>
  </Toolbar>
</AppBar>

2. StyledFab 的使用

在 Bottom App Bar 中，浮动按钮（FAB，Floating Action Button）通常用于执行重要的或优先级较高的操作。通过 styled 函数，我们可以自定义 Fab 按钮的位置及样式，使其浮动在导航栏的上方。

const StyledFab = styled(Fab)({
  position: 'absolute',
  zIndex: 1,
  top: -30,
  left: 0,
  right: 0,
  margin: '0 auto',
});

该代码将 Fab 按钮绝对定位，使其悬浮在 Bottom App Bar 上方，同时确保其水平居中。

三、结合其他组件的应用场景

Bottom App Bar 通常不仅仅是一个简单的导航栏，还可以结合其他 Material-UI 组件，如 List、Paper、Avatar 等，创建一个功能丰富的页面底部导航。

1. 使用 List 显示消息列表

在移动应用中，底部导航常用于显示如消息、通知等重要内容。通过 List 和 ListItemButton，可以轻松地在 Bottom App Bar 的上方展示一系列消息。

<Paper square sx={{ pb: '50px' }}>
  <Typography variant="h5" gutterBottom component="div" sx={{ p: 2, pb: 0 }}>
    Inbox
  </Typography>
  <List sx={{ mb: 2 }}>
    {messages.map(({ id, primary, secondary, person }) => (
      <React.Fragment key={id}>
        {id === 1 && (
          <ListSubheader sx={{ bgcolor: 'background.paper' }}>
            Today
          </ListSubheader>
        )}
        <ListItemButton>
          <ListItemAvatar>
            <Avatar alt="Profile Picture" src={person} />
          </ListItemAvatar>
          <ListItemText primary={primary} secondary={secondary} />
        </ListItemButton>
      </React.Fragment>
    ))}
  </List>
</Paper>

在这个例子中，Paper 用于创建一个带有阴影的容器，List 和 ListItemButton 组件则用来展示消息的主内容。每条消息都带有头像、主文本和副文本，通过 Material-UI 的 Avatar 组件展示用户的头像，给用户带来更好的视觉体验。

2. 使用 IconButton 添加功能按钮

IconButton 是 App Bar 中常用的交互组件，可以为用户提供快捷的操作，如打开菜单、搜索功能等。在 Bottom App Bar 中，常见的使用场景包括：

• 打开侧边栏菜单：通过点击菜单图标，用户可以展开一个侧边导航栏。
• 搜索功能：搜索图标通常放在页面底部导航中，用户点击后会弹出搜索框。
• 更多选项：通过 MoreVertIcon 提供更多的选项或操作列表，用户可以点击查看更多功能。

四、Bottom App Bar 的优缺点

1. 优点

• 节省空间：Bottom App Bar 将常用的导航功能置于屏幕底部，有效利用了页面的空余空间，特别适合在移动设备上使用。
• 易于访问：由于手机用户的拇指习惯放在屏幕下方，Bottom App Bar 能为用户提供便捷的操作体验。
• 灵活性高：可以根据需求轻松自定义 App Bar 中的内容，如添加按钮、标题、菜单等。

2. 缺点

• 占用屏幕底部空间：Bottom App Bar 固定在页面底部，可能会与一些底部内容产生冲突，特别是在设计较复杂的页面时。
• 在大屏设备上不适用：对于桌面或大屏设备，用户的交互习惯更倾向于使用顶部导航，因此 Bottom App Bar 更适合移动端应用。

五、Bottom App Bar 实现中的最佳实践

1. 保持简洁：Bottom App Bar 应尽量保持功能简洁，避免放置过多的按钮，以免让用户感到困惑。
2. 优先级分明：通过浮动按钮（FAB）或其他明显的交互元素，强调最重要的功能，如新增、发布等。
3. 合理布局：在 Bottom App Bar 中应合理安排各个按钮的位置，确保用户能轻松访问重要功能。

六、总结

Bottom App Bar 是 Material-UI 中非常实用的组件，尤其适合移动设备的网页或应用开发。通过结合其他 Material-UI 组件，如 List、IconButton 和 Fab，可以为用户提供流畅的交互体验。尽管 Bottom App Bar 的设计简单，但在具体实现时，仍需考虑布局和功能的平衡，确保用户界面的易用性和美观性。

推荐：

• JavaScript
• react
• vue

---