【Material-UI】App Bar中的搜索栏详解

Material-UI 是一个广泛用于 React 项目中的 UI 框架，提供了丰富的组件和工具，用于构建现代化的用户界面。在许多应用程序中，App Bar 是导航栏的核心组件，而带有搜索栏的 App Bar 更是常见的设计需求之一。本文将深入介绍如何在 Material-UI 中创建一个带有搜索栏的 App Bar，帮助开发者快速集成并自定义这个功能。

一、App Bar 组件概述

1. 组件介绍

App Bar 是 Material-UI 提供的一个常见的顶栏组件，通常用于放置应用程序的导航、标题、搜索栏等内容。它能够很好地适应不同的屏幕尺寸，并提供了许多可定制的选项，适用于桌面端和移动端。

在许多实际项目中，带有搜索功能的 App Bar 是应用的关键部分，尤其是在内容量较大的应用中，搜索功能能够大大提升用户体验。

2. 搜索栏的作用

搜索栏允许用户快速查找应用中的内容，特别是在数据量庞大的应用中，如电子商务平台、文章阅读类应用等。通过在 App Bar 中集成搜索栏，可以提升用户的交互效率，同时也使界面布局更加简洁。

二、带有搜索栏的 App Bar 基本实现

以下代码展示了如何在 Material-UI 中创建一个带有搜索栏的 App Bar：

import * as React from 'react';
import { styled, alpha } from '@mui/material/styles';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import InputBase from '@mui/material/InputBase';
import MenuIcon from '@mui/icons-material/Menu';
import SearchIcon from '@mui/icons-material/Search';

const Search = styled('div')(({ theme }) => ({
  position: 'relative',
  borderRadius: theme.shape.borderRadius,
  backgroundColor: alpha(theme.palette.common.white, 0.15),
  '&:hover': {
    backgroundColor: alpha(theme.palette.common.white, 0.25),
  },
  marginLeft: 0,
  width: '100%',
  [theme.breakpoints.up('sm')]: {
    marginLeft: theme.spacing(1),
    width: 'auto',
  },
}));

const SearchIconWrapper = styled('div')(({ theme }) => ({
  padding: theme.spacing(0, 2),
  height: '100%',
  position: 'absolute',
  pointerEvents: 'none',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
}));

const StyledInputBase = styled(InputBase)(({ theme }) => ({
  color: 'inherit',
  '& .MuiInputBase-input': {
    padding: theme.spacing(1, 1, 1, 0),
    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
    transition: theme.transitions.create('width'),
    [theme.breakpoints.up('sm')]: {
      width: '12ch',
      '&:focus': {
        width: '20ch',
      },
    },
  },
}));

export default function SearchAppBar() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="open drawer"
            sx={{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
          <Typography
            variant="h6"
            noWrap
            component="div"
            sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}
          >
            MUI
          </Typography>
          <Search>
            <SearchIconWrapper>
              <SearchIcon />
            </SearchIconWrapper>
            <StyledInputBase
              placeholder="Search…"
              inputProps={{ 'aria-label': 'search' }}
            />
          </Search>
        </Toolbar>
      </AppBar>
    </Box>
  );
}

3. 代码解析

• AppBar: 这是整个顶栏的容器，通常用于放置导航、标题、操作按钮等。
• Toolbar: Toolbar 是 App Bar 的内容容器，确保顶栏中的内容在不同屏幕尺寸下具有良好的布局表现。
• IconButton: IconButton 用于显示菜单图标，通常放在顶栏的左侧，允许用户打开侧边栏菜单。
• Typography: 这是 Material-UI 提供的用于处理文本的组件，在该示例中用于显示标题 “MUI”。
• Search: Search 是搜索栏的容器，使用 styled 方法进行样式定制，以提供良好的视觉效果。
• StyledInputBase: 自定义的输入框，用于实现搜索输入功能，并且在聚焦时能够动态调整宽度。

三、App Bar 搜索栏的样式定制

1. 搜索栏的设计

在上述实现中，搜索栏使用了 styled 方法对其样式进行了高度定制。通过 alpha 函数，开发者可以方便地设置搜索栏背景颜色的透明度，使其与顶栏整体风格更加和谐。

const Search = styled('div')(({ theme }) => ({
  backgroundColor: alpha(theme.palette.common.white, 0.15),
  '&:hover': {
    backgroundColor: alpha(theme.palette.common.white, 0.25),
  },
}));

• alpha 函数通过设置透明度，让搜索栏在正常状态和悬停状态下都有不同的视觉表现，使用户在操作时能够感受到微妙的界面反馈。

2. 搜索图标与输入框的布局

搜索图标与输入框的布局是通过 SearchIconWrapper 和 StyledInputBase 进行定制的。图标被放置在输入框的左侧，且设置为 pointerEvents: 'none'，确保其不可点击，从而使整个搜索栏的交互行为更加统一。

const SearchIconWrapper = styled('div')(({ theme }) => ({
  position: 'absolute',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
}));

而 StyledInputBase 则通过 theme.spacing 动态调整搜索输入框的内边距和宽度，确保其在不同屏幕尺寸下的表现良好。

const StyledInputBase = styled(InputBase)(({ theme }) => ({
  '& .MuiInputBase-input': {
    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
    transition: theme.transitions.create('width'),
    [theme.breakpoints.up('sm')]: {
      width: '12ch',
      '&:focus': {
        width: '20ch',
      },
    },
  },
}));

四、App Bar 搜索栏的响应式设计

在现代应用中，响应式设计尤为重要。Material-UI 为我们提供了简单易用的断点系统，使得搜索栏在不同尺寸的设备上能够动态调整其布局和尺寸。

在该示例中，我们通过 theme.breakpoints.up('sm') 设置了一个断点，使搜索框在屏幕尺寸较小时（如移动端）占满宽度，而在大屏设备上（如桌面端），搜索框则会根据用户的交互动态调整其宽度。

[theme.breakpoints.up('sm')]: {
  width: '12ch',
  '&:focus': {
    width: '20ch',
  },
},

这种设计不仅确保了用户在移动设备上获得良好的搜索体验，还保证了桌面端的界面美观和简洁。

五、App Bar 搜索栏的实际应用场景

1. 内容密集型应用

在电子商务、新闻门户等需要大量数据展示的应用中，搜索栏几乎是不可或缺的功能。将搜索栏集成在 App Bar 中，可以大大提升用户的查找效率，同时保持界面的简洁。

2. 企业内部工具

对于企业内部管理系统，如库存管理、员工管理等系统，快速搜索功能能够帮助用户迅速定位所需信息。在 App Bar 中集成搜索栏，不仅提高了操作效率，还符合现代用户的使用习惯。

六、总结

带有搜索栏的 App Bar 是 Material-UI 中非常实用的功能，通过简单的样式定制和响应式设计，可以让这个组件在多种应用场景中发挥重要作用。无论是提高用户体验，还是提升操作效率，搜索功能的集成都是值得推荐的设计选择。

推荐：

• JavaScript
• react
• vue

---