Flutter滚动隐藏头部插件scroll_to_hide的使用

ScrollToHide Flutter Package

ScrollToHide 包是一个Flutter插件，旨在当用户向下滚动时隐藏小部件（例如底部导航栏），并在用户向上滚动时再次显示它。这种行为通常用于提供更加沉浸式和无干扰的应用程序用户体验。

安装

要在你的项目中使用 ScrollToHide 包，在你的 pubspec.yaml 文件中添加它作为依赖：

dependencies:
  scroll_to_hide: ^2.1.0 

导入

1. 在你的Dart文件中导入 ScrollToHide 包：

import 'package:flutter/material.dart';
import 'package:scroll_to_hide/scroll_to_hide.dart';

1. 使用 ScrollToHide 小部件包裹你想要在滚动时隐藏的小部件：

ScrollToHide(
  scrollController: _yourScrollController,
  height: _desiredHeight, // 小部件的初始高度。
  duration: Duration(milliseconds: 300), // 隐藏/显示动画的持续时间。
  child: YourWidgetToHide(),
),

构造函数参数

• scrollController (required): 连接到应用程序中可滚动小部件的 ScrollController。这用于跟踪滚动位置并确定是否要隐藏或显示子小部件。
• child (required): 根据滚动方向要隐藏/显示的小部件。
• height (required): 子小部件的初始高度。当小部件被隐藏时，其高度将被动画化为0。
• duration: 当子小部件被隐藏或显示时的动画持续时间。默认设置为 Duration(milliseconds: 300)。

方法

ScrollToHide 小部件提供了两个方法，允许你手动显示或隐藏子小部件：

1. void show(): 如果子小部件当前是隐藏的，则显示它。
2. void hide(): 如果子小部件当前是显示的，则隐藏它。

示例代码

以下是一个完整的示例demo，展示了如何使用 ScrollToHide 插件来实现一个带有滚动隐藏功能的页面：

import 'package:flutter/material.dart';
import 'package:scroll_to_hide/scroll_to_hide.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Scroll To Hide Package Example',
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final ScrollController _scrollController = ScrollController();

  @override
  void dispose() {
    super.dispose();
    _scrollController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Scroll To Hide Example')),
      body: ListView(
        controller: _scrollController,
        children: List.generate(
          100,
          (index) => ListTile(
            title: Text('Item $index'),
          ),
        ),
      ),
      bottomNavigationBar: ScrollToHide(
        scrollController: _scrollController,
        height: 75,
        hideDirection: Axis.vertical,
        child: BottomNavigationBar(
          items: const [
            BottomNavigationBarItem(
              icon: Icon(Icons.home, color: Colors.white,),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.favorite_outline, color: Colors.white,),
              label: 'Favourite',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings, color: Colors.white,),
              label: 'Setting',
            ),
          ],
          backgroundColor: Colors.black.withOpacity(.7),
        ),
      ),
    );
  }
}

在这个例子中，BottomNavigationBar 将在用户向下滚动时隐藏，并在用户向上滚动时再次显示。

注意事项

• ScrollToHide 小部件依赖于 ScrollController 来跟踪滚动位置。确保正确初始化和释放 ScrollController 以避免内存泄漏。
• 提供合理的 height 参数值，以确保小部件在首次显示时具有正确的初始高度。
• 该包内部使用 AnimatedContainer 来实现隐藏/显示过渡动画。因此，建议使用轻量级的小部件作为 ScrollToHide 的子元素，以确保流畅的动画效果。

更多信息

这是 ScrollToHide 包的GitHub链接：https://github.com/ElG0hary/scroll_to_hide

通过以上内容，你可以轻松地在Flutter项目中集成 ScrollToHide 插件，并实现滚动时隐藏或显示特定小部件的功能。