【Material-UI】App Bar中的 Hide App Bar 功能详解

Material-UI 是 React 生态系统中非常受欢迎的 UI 框架，提供了丰富的组件，帮助开发者快速构建美观、响应式的界面。其中，App Bar 是一个常见的导航栏组件，可以用于应用的顶部导航。本文将详细介绍 Material-UI 中 App Bar 组件的 Hide App Bar 功能，展示如何使用 useScrollTrigger 钩子来响应用户的滚动操作，使导航栏在用户滚动页面时自动隐藏，提升用户体验。

一、App Bar 组件概述

1. 组件介绍

App Bar 是 Material-UI 中用于显示顶部导航栏的组件。通常，它包含标题、图标、菜单按钮等内容，用户可以通过点击导航栏中的选项进行页面切换。App Bar 提供了一种结构化且简洁的方式来实现导航，并且支持自定义样式和行为，使其适应不同的设计需求。

2. Hide App Bar 功能的概述

在许多应用中，用户希望在滚动页面时能够自动隐藏顶部导航栏，从而为内容展示提供更多的屏幕空间。Material-UI 提供了 Hide App Bar 功能，通过 useScrollTrigger 钩子实现导航栏在页面向下滚动时自动隐藏，而在向上滚动时重新显示。这个功能在移动端应用和长页面内容展示中尤为常见，有助于提升用户的阅读体验。

二、useScrollTrigger 钩子的作用

1. 钩子简介

useScrollTrigger 是 Material-UI 提供的一个钩子函数，它可以检测用户的滚动行为，并触发相应的 UI 变化。在实现 Hide App Bar 功能时，useScrollTrigger 会检测页面的滚动方向，并决定是否隐藏 App Bar。

useScrollTrigger 可以接受一些参数，比如目标元素（target），默认情况下是 window 对象。当页面滚动到一定位置时，它会返回一个布尔值，指示是否需要触发相应的 UI 变化。

2. 使用示例

以下是如何使用 useScrollTrigger 钩子实现 Hide App Bar 功能的代码示例：

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';
import Slide from '@mui/material/Slide';

function HideOnScroll(props) {
  const { children, window } = props;
  
  const trigger = useScrollTrigger({
    target: window ? window() : undefined,
  });

  return (
    <Slide appear={false} direction="down" in={!trigger}>
      {children ?? <div />}
    </Slide>
  );
}

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

export default function HideAppBar(props) {
  return (
    <React.Fragment>
      <CssBaseline />
      <HideOnScroll {...props}>
        <AppBar>
          <Toolbar>
            <Typography variant="h6" component="div">
              Scroll to hide App bar
            </Typography>
          </Toolbar>
        </AppBar>
      </HideOnScroll>
      <Toolbar />
      <Container>
        <Box sx={{ my: 2 }}>
          {[...new Array(12)]
            .map(
              () => `Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`,
            )
            .join('\n')}
        </Box>
      </Container>
    </React.Fragment>
  );
}

三、代码详解

1. HideOnScroll 组件的作用

在上面的代码中，我们首先定义了一个名为 HideOnScroll 的函数组件，它的作用是基于 useScrollTrigger 的返回值来控制 App Bar 的显示和隐藏。在这个组件中：

• useScrollTrigger 钩子负责检测页面的滚动事件，并返回一个布尔值 trigger。
• 如果 trigger 为 true，则表示页面正在向下滚动，此时 App Bar 会自动隐藏。
• 如果 trigger 为 false，表示用户滚动页面向上，App Bar 会重新显示。

2. Slide 组件的作用

Material-UI 的 Slide 组件用于实现滑动效果。在 HideOnScroll 组件中，Slide 的 direction 属性设置为 "down"，表示 App Bar 从上方滑入或滑出屏幕。

• in={!trigger}：当 trigger 为 false 时，Slide 组件将滑入 App Bar，显示在屏幕上；当 trigger 为 true 时，Slide 组件将滑出 App Bar，从屏幕上消失。
• appear={false}：设置为 false，表示 App Bar 不会在初次渲染时进行滑动动画。

3. HideAppBar 组件的结构

HideAppBar 是主组件，它负责渲染整个页面的结构。在这个组件中，我们使用了以下 Material-UI 组件：

• CssBaseline：提供了跨浏览器的一致性样式，确保页面的基础样式一致。
• AppBar：显示顶部导航栏，其中包含了一个 Typography 组件用于显示标题。
• Toolbar：充当 AppBar 的容器，负责布局。
• Container 和 Box：用于显示页面内容，它们帮助构建出一个布局良好的页面结构。

四、Hide App Bar 的实际应用场景

1. 阅读页面中的应用

在阅读类应用或长文章展示中，用户经常需要全屏阅读内容，Hide App Bar 功能可以在用户向下滚动时自动隐藏导航栏，避免占用过多的屏幕空间。当用户向上滚动时，导航栏重新出现，方便用户快速返回其他页面或执行操作。

2. 移动端应用中的应用

在移动端设备上，屏幕空间相对有限，因此隐藏导航栏可以为内容展示留出更多空间。用户滚动时隐藏 App Bar 是一种非常常见的设计模式，尤其适合内容密集的页面。

3. 单页应用（SPA）中的应用

对于单页应用，用户通常会在同一页面中进行大量的滚动操作。通过隐藏 App Bar，可以让用户更专注于当前页面的内容，提高阅读效率。

五、注意事项

1. 确保导航栏的可访问性

虽然 Hide App Bar 提供了更好的用户体验，但开发者应确保导航栏的隐藏和显示不会影响可访问性。例如，在移动端设备上，导航栏应该易于访问，避免用户无法找到返回或菜单按钮。

2. 调整隐藏阈值

useScrollTrigger 钩子允许开发者调整触发导航栏隐藏的滚动阈值。在某些场景中，可以根据页面的内容长度或用户交互习惯，适当调整触发隐藏的滚动距离，以提供更好的用户体验。

六、总结

Material-UI 的 App Bar 组件中的 Hide App Bar 功能通过 useScrollTrigger 钩子实现导航栏的自动隐藏和显示。这一功能在提升用户体验、节省屏幕空间方面具有重要作用，尤其适用于阅读类应用和移动端应用。在开发过程中，合理配置和使用 Hide App Bar 功能，可以让你的应用在视觉效果和用户交互上更加出色。希望本文能帮助你更好地理解和使用 Hide App Bar，为用户提供更加流畅的使用体验。

推荐：

• JavaScript
• react
• vue

---