Bottom Navigation 是 Material UI 提供的一种用于在移动设备上实现导航的组件。它通常用于应用的底部，允许用户在主要的视图之间快速切换。本文将详细介绍 Bottom Navigation 的使用方法、属性和方法，以及结合其他组件的示例代码。

1. 什么是 Bottom Navigation？

Bottom Navigation 是一种用户界面元素，通常出现在移动应用的底部，用于快速访问应用的主要部分。它可以包含多个图标，并且每个图标可以与一个特定的屏幕或视图相关联。

2. 安装 Material UI

确保你的项目中已经安装了 Material UI。如果尚未安装，请使用以下命令：

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

3. 基本用法

示例：基础的 Bottom Navigation

import React from 'react';
import BottomNavigation from '@mui/material/BottomNavigation';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';
import HomeIcon from '@mui/icons-material/Home';
import FavoriteIcon from '@mui/icons-material/Favorite';
import PersonIcon from '@mui/icons-material/Person';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';

function BasicBottomNavigation() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Paper elevation={3} sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }}>
      <BottomNavigation
        value={value}
        onChange={handleChange}
      >
        <BottomNavigationAction label="首页" icon={<HomeIcon />} />
        <BottomNavigationAction label="收藏" icon={<FavoriteIcon />} />
        <BottomNavigationAction label="个人中心" icon={<PersonIcon />} />
      </BottomNavigation>
    </Paper>
  );
}

export default BasicBottomNavigation;

示例解析：

• 使用 BottomNavigation 和 BottomNavigationAction 来构建底部导航。
• value 属性用于表示当前选择的导航项。
• onChange 方法用于处理导航项的更改。

4. Bottom Navigation 的属性

常用属性

• value: 控制当前选中的导航项，通常与状态管理结合使用。
• onChange: 在选项更改时调用的回调函数。
• showLabels: 如果设置为 true，则显示标签文本；默认情况下只显示图标。

示例：使用 showLabels 属性

function BottomNavigationWithLabels() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Paper elevation={3} sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }}>
      <BottomNavigation
        value={value}
        onChange={handleChange}
        showLabels
      >
        <BottomNavigationAction label="首页" icon={<HomeIcon />} />
        <BottomNavigationAction label="收藏" icon={<FavoriteIcon />} />
        <BottomNavigationAction label="个人中心" icon={<PersonIcon />} />
      </BottomNavigation>
    </Paper>
  );
}

5. 自定义样式

示例：使用 sx 属性进行样式定制

function StyledBottomNavigation() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Paper elevation={3} sx={{ position: 'fixed', bottom: 0, left: 0, right: 0, backgroundColor: '#1976d2' }}>
      <BottomNavigation
        value={value}
        onChange={handleChange}
        showLabels
      >
        <BottomNavigationAction label="首页" icon={<HomeIcon />} sx={{ color: 'white' }} />
        <BottomNavigationAction label="收藏" icon={<FavoriteIcon />} sx={{ color: 'white' }} />
        <BottomNavigationAction label="个人中心" icon={<PersonIcon />} sx={{ color: 'white' }} />
      </BottomNavigation>
    </Paper>
  );
}

6. Bottom Navigation 与其他组件的结合使用

示例：结合 AppBar 和 Bottom Navigation

import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';

function AppBarWithBottomNavigation() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <div>
      <AppBar position="static">
        <Toolbar>
          <Typography variant="h6">我的应用</Typography>
        </Toolbar>
      </AppBar>
      <Paper elevation={3} sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }}>
        <BottomNavigation
          value={value}
          onChange={handleChange}
          showLabels
        >
          <BottomNavigationAction label="首页" icon={<HomeIcon />} />
          <BottomNavigationAction label="收藏" icon={<FavoriteIcon />} />
          <BottomNavigationAction label="个人中心" icon={<PersonIcon />} />
        </BottomNavigation>
      </Paper>
    </div>
  );
}

示例解析：

• 在此示例中，AppBar 和 BottomNavigation 组合在一起，形成完整的应用结构。
• 使用 Toolbar 来放置应用标题。

7. 响应式设计

示例：响应式 Bottom Navigation

import Container from '@mui/material/Container';
import Hidden from '@mui/material/Hidden';

function ResponsiveBottomNavigation() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Container>
      <Typography variant="h4" sx={{ margin: 2 }}>欢迎使用我的应用</Typography>
      <Hidden smDown>
        <Paper elevation={3} sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }}>
          <BottomNavigation
            value={value}
            onChange={handleChange}
            showLabels
          >
            <BottomNavigationAction label="首页" icon={<HomeIcon />} />
            <BottomNavigationAction label="收藏" icon={<FavoriteIcon />} />
            <BottomNavigationAction label="个人中心" icon={<PersonIcon />} />
          </BottomNavigation>
        </Paper>
      </Hidden>
    </Container>
  );
}

示例解析：

• 使用 Hidden 组件，可以在不同的屏幕尺寸下隐藏或显示 Bottom Navigation。
• smDown 表示在小于或等于小屏幕时隐藏该组件。

8. 总结

在本文中，我们详细探讨了 Material UI 中的 Bottom Navigation 组件，包括基本用法、属性、样式自定义、与其他组件的结合使用以及响应式设计。Bottom Navigation 提供了良好的用户体验，适用于移动应用和网页应用。

希望通过这些示例，你能更好地理解和使用 Bottom Navigation 组件，为你的应用提供清晰的导航。如果你对 Material UI 的其他组件感兴趣，欢迎继续关注我们的系列文章。