【Material-UI】App Bar中的 Elevate App bar 详解

Material-UI 是 React 开发中非常流行的 UI 库，提供了大量的功能组件来提升开发效率和用户体验。App Bar 是其中一个常用的组件，常用于网页的顶部导航栏。而 Elevate App bar 功能通过在滚动时提升导航栏的视觉层次，传达用户已不在页面顶部的状态。本文将详细介绍 Elevate App bar 的功能与实现方式，并探讨其应用场景和注意事项。

一、App Bar 组件概述

1. 组件介绍

App Bar 是一个顶栏组件，通常用于页面的导航部分，包含网站的 logo、标题、导航按钮等。通过 App Bar，用户能够快速访问不同的页面或功能区域。Material-UI 提供了一个易于使用的 App Bar 组件，能够根据开发者的需求进行自定义。

2. Elevate App bar 的特点

Elevate App bar 是 App Bar 组件的一个常见增强功能。它可以通过在用户滚动页面时提升导航栏的视觉层次（增加阴影效果）来提示用户，帮助用户更好地感知他们是否已不在页面顶部。这个功能可以增强用户体验，使得用户在浏览长页面时不会感到迷失。

二、Elevate App bar 的基本实现

我们可以通过 useScrollTrigger 钩子来实现这个效果，该钩子能够捕捉用户的滚动动作，并根据滚动状态触发不同的效果。下面是一个基本的代码示例：

import * as React from 'react';
import PropTypes from 'prop-types';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import CssBaseline from '@mui/material/CssBaseline';
import useScrollTrigger from '@mui/material/useScrollTrigger';
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';

function ElevationScroll(props) {
  const { children, window } = props;
  
  const trigger = useScrollTrigger({
    disableHysteresis: true,  // 禁用滞后效果，滚动立即触发
    threshold: 0,  // 触发效果的滚动距离阈值
    target: window ? window() : undefined,  // 设置触发目标
  });

  return React.cloneElement(children, {
    elevation: trigger ? 4 : 0,  // 根据滚动状态设置 elevation
  });
}

ElevationScroll.propTypes = {
  children: PropTypes.element.isRequired,
  window: PropTypes.func,
};

export default function ElevateAppBar(props) {
  return (
    <React.Fragment>
      <CssBaseline />
      <ElevationScroll {...props}>
        <AppBar>
          <Toolbar>
            <Typography variant="h6" component="div">
              Scroll to elevate App bar
            </Typography>
          </Toolbar>
        </AppBar>
      </ElevationScroll>
      <Toolbar />
      <Container>
        <Box sx={{ my: 2 }}>
          {[...new Array(12)]
            .map(() => `Cras mattis consectetur purus sit amet fermentum.`)
            .join('\n')}
        </Box>
      </Container>
    </React.Fragment>
  );
}

代码分析

1. useScrollTrigger: 这是 Material-UI 提供的钩子，用来监测用户的滚动行为。disableHysteresis: true 使得滚动时效果立即触发，而 threshold: 0 表示只要页面开始滚动，App Bar 就会提升视觉效果。
2. elevation 属性: 这是 Material-UI 提供的一个属性，用来控制 App Bar 的阴影效果。值越大，阴影越深。当用户滚动页面时，elevation 会从 0 变为 4，使导航栏“浮起”，以示用户已经滚动了页面。
3. React.cloneElement: 在返回子组件时，通过 cloneElement 方法将 elevation 属性传递给子组件。

三、应用场景分析

Elevate App bar 在一些特定场景中非常实用，特别是在长页面或具有大量滚动内容的网页中。

1. 长页面的导航

在内容较长的网页（如博客、文档或电商网站）中，用户可能会频繁滚动浏览内容。通过 Elevate App bar，当用户向下滚动时，顶部的导航栏会产生视觉层次变化，从而提醒用户可以随时点击导航返回页面顶部或访问其他页面。

2. 用户体验的提升

当用户滚动到页面中部或底部时，通过提升 App Bar 的视觉效果，用户能够更容易地识别导航栏。这种细微的视觉提示不会打断用户的阅读流，但能有效提升网站的导航体验。

3. 结合其他组件的使用

Elevate App bar 可以与其他组件（如 Drawer、Tabs）配合使用，进一步增强网页的可用性。例如，在一个带有侧边栏菜单的页面中，导航栏可以滚动时提升，而侧边栏菜单则可以保持固定，从而帮助用户快速导航和访问功能。

四、进阶功能与定制化

1. 自定义滚动阈值

在上述示例中，threshold: 0 意味着当页面开始滚动时，App Bar 就会被提升。但在一些应用场景中，开发者可能希望只有在用户滚动超过一定距离后才触发此效果。可以通过修改 threshold 的值来实现这一需求。例如，设置 threshold: 100，则需要用户滚动 100px 后，App Bar 才会提升：

const trigger = useScrollTrigger({
  disableHysteresis: true,
  threshold: 100,  // 用户需要滚动 100px 才会触发
});

2. 自定义阴影效果

默认情况下，elevation 值为 4 时的阴影效果已经足够明显。如果需要更深的阴影，可以通过将 elevation 的值增加到更大，例如 6 或 8 来进一步加深效果：

elevation: trigger ? 6 : 0,

此外，也可以通过 sx 属性或 styled 函数自定义 App Bar 的样式，打造更符合设计需求的导航栏。

3. 滚动效果的优化

对于性能敏感的页面，建议谨慎设置 threshold 和 disableHysteresis，以避免过于频繁的 UI 更新对性能造成影响。对于较为复杂的布局，可以借助 requestAnimationFrame 来优化滚动监听，确保用户在滚动时的体验流畅。

五、注意事项

1. 兼容性问题

useScrollTrigger 钩子默认会监听全局的 window 滚动事件，但在某些特殊场景（如在 iframe 内嵌套页面时），需要为 useScrollTrigger 提供正确的 target，确保滚动事件的监听准确无误。

const trigger = useScrollTrigger({
  target: window ? window() : undefined,
});

2. 与其他布局组件的配合

App Bar 通常与其他布局组件（如 Toolbar、Drawer）一同使用，因此在使用 Elevate App bar 时，要确保与其他组件的布局关系合理。例如，Toolbar 通常会占据一定的垂直空间，因此在布局时要注意避免内容被遮挡。

<React.Fragment>
  <CssBaseline />
  <ElevationScroll {...props}>
    <AppBar>
      <Toolbar>
        <Typography variant="h6" component="div">
          Scroll to elevate App bar
        </Typography>
      </Toolbar>
    </AppBar>
  </ElevationScroll>
  <Toolbar />  // 留出导航栏的高度空间，避免遮挡内容
  <Container>
    <Box sx={{ my: 2 }}>
      {/* 内容部分 */}
    </Box>
  </Container>
</React.Fragment>

六、总结

Elevate App bar 是 Material-UI 中一个非常实用的功能，能够通过滚动时提升导航栏的视觉层次，为用户提供更清晰的页面导航反馈。通过合理设置 useScrollTrigger 钩子和自定义 elevation 属性，开发者可以灵活实现不同的滚动效果，增强用户体验。在实际应用中，建议结合页面的布局特点和用户需求，合理设置滚动阈值和样式，确保页面的流畅性和可用性。希望本文对你理解和使用 Elevate App bar 有所帮助，为项目带来更好的用户体验。

推荐：

• JavaScript
• react
• vue

---