【Material-UI】Bottom Navigation中的 Fixed Positioning 详解

Material-UI 是一个非常流行的 React UI 库，提供了大量的预构建组件，帮助开发者快速构建用户界面。在现代网页设计中，底部导航栏（Bottom Navigation）是提升用户体验的关键元素之一。本文将详细介绍 Material-UI 的 Bottom Navigation 组件中的 Fixed Positioning（固定定位）特性，帮助你在开发中轻松实现底部导航栏的固定效果。

一、Bottom Navigation 组件概述

1. 组件介绍

Bottom Navigation 是一种常见的导航栏设计，通常位于移动应用或响应式网页的底部。它允许用户在多个应用视图或功能之间切换，能够极大地提升用户的操作效率。Material-UI 提供的 Bottom Navigation 组件具备高度的灵活性和可定制性，允许开发者根据实际项目需求进行调整。

2. 固定定位的作用

在开发中，特别是内容较长的页面中，确保导航栏固定在页面底部，无论用户滚动到何处，都可以方便地进行导航，这样的设计能极大提升用户体验。Material-UI 的 Bottom Navigation 组件通过简单的 CSS 样式，即可实现这一固定效果。

本文主要演示如何在页面中实现带有固定定位的 Bottom Navigation，并确保无论页面内容的多少，导航栏始终固定在屏幕底部。

二、Fixed Positioning 的基本用法

1. 代码示例

通过以下代码示例，我们可以看到如何在 React 项目中使用 Material-UI 实现固定的 Bottom Navigation。

import * as React from 'react';
import Box from '@mui/material/Box';
import CssBaseline from '@mui/material/CssBaseline';
import BottomNavigation from '@mui/material/BottomNavigation';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';
import RestoreIcon from '@mui/icons-material/Restore';
import FavoriteIcon from '@mui/icons-material/Favorite';
import ArchiveIcon from '@mui/icons-material/Archive';
import Paper from '@mui/material/Paper';
import List from '@mui/material/List';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import ListItemText from '@mui/material/ListItemText';
import Avatar from '@mui/material/Avatar';

function refreshMessages() {
  const getRandomInt = (max) => Math.floor(Math.random() * Math.floor(max));
  return Array.from(new Array(50)).map(
    () => messageExamples[getRandomInt(messageExamples.length)],
  );
}

export default function FixedBottomNavigation() {
  const [value, setValue] = React.useState(0);
  const ref = React.useRef(null);
  const [messages, setMessages] = React.useState(() => refreshMessages());

  React.useEffect(() => {
    ref.current.ownerDocument.body.scrollTop = 0;
    setMessages(refreshMessages());
  }, [value, setMessages]);

  return (
    <Box sx={{ pb: 7 }} ref={ref}>
      <CssBaseline />
      <List>
        {messages.map(({ primary, secondary, person }, index) => (
          <ListItemButton key={index + person}>
            <ListItemAvatar>
              <Avatar alt="Profile Picture" src={person} />
            </ListItemAvatar>
            <ListItemText primary={primary} secondary={secondary} />
          </ListItemButton>
        ))}
      </List>
      <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>
        <BottomNavigation
          showLabels
          value={value}
          onChange={(event, newValue) => {
            setValue(newValue);
          }}
        >
          <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
          <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
          <BottomNavigationAction label="Archive" icon={<ArchiveIcon />} />
        </BottomNavigation>
      </Paper>
    </Box>
  );
}

const messageExamples = [
  {
    primary: 'Brunch this week?',
    secondary: "I'll be in the neighbourhood this week. Let's grab a bite to eat",
    person: '/static/images/avatar/5.jpg',
  },
  {
    primary: 'Birthday Gift',
    secondary: `Do you have a suggestion for a good present for John on his work
      anniversary. I am really confused & would love your thoughts on it.`,
    person: '/static/images/avatar/1.jpg',
  },
  // 其他信息省略...
];

2. 代码分析

在上述代码中，我们实现了一个固定在页面底部的 Bottom Navigation，并通过 Paper 组件的 position: 'fixed' 样式确保其始终固定在底部。下面我们来逐步解析这段代码：

• Box 组件：Box 是 Material-UI 中常见的布局组件，通过 sx={{ pb: 7 }} 为页面内容设置底部边距，防止内容遮挡底部导航栏。
• Bottom Navigation 组件：核心的导航栏部分，包含三个 BottomNavigationAction，分别对应“Recents”、“Favorites”和“Archive”功能。通过 value 状态控制当前激活的导航项。
• Paper 组件：Paper 组件被用来容纳 Bottom Navigation，并通过 position: 'fixed'、bottom: 0 等样式属性使其固定在底部。
• List 和 Avatar 组件：这些组件被用来模拟页面内容，以显示大量信息如何与固定导航栏配合工作。List 列表内容可以滚动，而 Bottom Navigation 始终保持固定在底部。

三、Fixed Positioning 的实现细节

1. 固定定位的优点

Bottom Navigation 使用 Fixed Positioning 的主要优点在于用户体验的提升。无论用户浏览到页面的哪个部分，底部导航栏始终可见，方便用户随时切换页面视图或功能，避免用户需要滚动回顶部或底部寻找导航入口。这种设计在信息量较大、页面较长的应用场景中特别实用，尤其是在移动端开发中，底部导航的固定定位可以极大地提升交互效率。

2. 使用 Paper 组件进行定位

在本示例中，我们使用了 Material-UI 的 Paper 组件来实现固定效果。Paper 是一种常见的容器组件，带有阴影（elevation）效果，使得导航栏在视觉上更加突出。通过 sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} 的样式属性，Paper 容器被固定在页面的底部，保证它始终位于屏幕可视区域。

3. 处理内容溢出问题

在内容较多的页面中，导航栏固定可能会导致内容被遮挡。为了解决这一问题，我们可以通过给页面内容区域设置底部内边距（padding-bottom）来确保内容不会被固定的导航栏遮挡。在本示例中，Box 组件的 sx={{ pb: 7 }} 属性就是为页面内容区域设置了足够的底部内边距。

4. 动态内容刷新

代码中的 refreshMessages() 函数模拟了一个动态刷新内容的功能。它生成了一系列假消息，并在每次用户切换 Bottom Navigation 时刷新内容。这种动态更新的机制展示了 Bottom Navigation 与其他组件如何无缝协作。

四、实战建议

在实际项目中，使用 Bottom Navigation 时需要根据用户场景来决定是否使用 Fixed Positioning。在移动端和单页应用（SPA）中，固定的底部导航栏可以显著提高用户体验，便于用户快速访问核心功能。而在桌面端，若页面较复杂或内容较多，开发者则需要谨慎使用这种固定布局，以免影响用户的阅读体验。

性能优化建议

在使用固定导航栏时，确保页面滚动的流畅性至关重要。过多的 DOM 操作或复杂的动画可能会导致性能问题。因此，在动态更新内容时，尽量减少不必要的重新渲染，并且根据需要优化组件的渲染性能。

五、总结

Bottom Navigation 是 Material-UI 提供的一个非常实用的导航组件，尤其适合移动端应用。在本文中，我们重点介绍了如何通过 Fixed Positioning 实现底部导航栏的固定效果。通过灵活运用 Material-UI 的布局和样式系统，你可以轻松实现一个功能齐全、用户体验友好的底部导航栏。在实际开发中，结合具体的用户需求和场景，可以进一步优化导航栏的布局与交互。

推荐：

• JavaScript
• react
• vue

---