Flutter滚动隐藏插件scroll_vanisher的使用

Flutter滚动隐藏插件scroll_vanisher的使用

ScrollVanisher

ScrollVanisher 是一个 Flutter 包，可以让任何组件在滚动时消失。通过使用此包，你可以创建一个干净且极简的用户界面，通过滚动使组件消失。

特性

  • 隐藏/显示任何组件。
  • 自定义隐藏/显示动画的持续时间和曲线。
  • 选择触发隐藏/显示效果的滚动方向。
  • 当滚动到顶部时重置组件状态。

开始使用

要使用此包，请遵循以下步骤。

安装

在你的项目 pubspec.yaml 文件中添加：

dependencies:
  scroll_vanisher: ^1.0.0

然后从命令行安装包：

$ flutter pub get

现在你可以在 Dart 代码中导入它：

import 'package:scroll_vanisher/scroll_vanisher.dart';

使用

将你的组件包裹在 ScrollVanisher 中，这样该组件就能支持滚动时的隐藏/显示功能。给 ScrollVanisher 提供的滚动控制器也必须传递给你的可滚动组件，如 ListView、GridView 或 SingleChildScrollView 等。

这是一个基本示例：

ScrollVanisher(
  controller: _scrollController,
  child: AppBar(
    title: Text('Scroll Vanisher'),
  ),
);

在这个例子中，当用户滚动 ListView、GridView 或 SingleChildScrollView 时，AppBar 会消失。

自定义

你可以通过以下参数来自定义 ScrollVanisher：

  • child: 你想添加滚动隐藏效果的组件。
  • controller: 监听用户滚动的主要滚动控制器。
  • replacement: 当组件隐藏时用来替换它的组件。
  • preferredWidgetSize: ScrollVanisher 的首选大小。
  • childDuration: 隐藏/显示动画的持续时间。
  • replacementDuration: 替换动画的持续时间。
  • childCurve: 组件淡出的曲线。
  • replacementCurve: 替换组件淡入的曲线。
  • scrollVanisherDirection: 触发隐藏/显示效果的滚动方向。
  • resetStateWhenScrolledToStart: 当滚动到顶部时是否重置组件状态。
  • startingOffset: 滚动的起始偏移量。
  • isEnabled: 控制组件隐藏的功能。

许可证

该项目采用 MIT 许可证 - 详情请参阅 许可证文件。

致谢

本项目受到由 insolite.io 开发的 hidable 库的启发。我们使用了该库的代码作为基础来构建并扩展其功能以满足我们的项目需求。

示例代码

import 'package:example/example/bottom_navigation/bottom_navigation_screen.dart';
import 'package:flutter/material.dart';

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

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

  // 这个组件是你的应用的根组件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scroll Vanisher',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.black),
        useMaterial3: true,
      ),
      home: BottomNavigationScreen(),
    );
  }
}

更多关于Flutter滚动隐藏插件scroll_vanisher的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter滚动隐藏插件scroll_vanisher的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用scroll_vanisher插件的一个示例。scroll_vanisher是一个用于在滚动时隐藏或显示Widget的插件。以下是如何在Flutter应用中使用它的代码案例。

首先，确保你已经在pubspec.yaml文件中添加了scroll_vanisher依赖：

dependencies:
  flutter:
    sdk: flutter
  scroll_vanisher: ^最新版本号 # 替换为最新版本号

然后运行flutter pub get来获取依赖。

接下来，我们来看一个完整的示例，展示如何使用scroll_vanisher来隐藏和显示一个AppBar：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ScrollVanisherExample(),
    );
  }
}

class ScrollVanisherExample extends StatefulWidget {
  @override
  _ScrollVanisherExampleState createState() => _ScrollVanisherExampleState();
}

class _ScrollVanisherExampleState extends State<ScrollVanisherExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scroll Vanisher Example'),
      ),
      body: ScrollVanisher(
        // 设置滚动监听器
        scrollController: PrimaryScrollController.of(context),
        // 设置需要隐藏或显示的Widget
        child: Column(
          children: [
            // 这个AppBar将在滚动时被隐藏
            VanishingWidget(
              offset: 200.0, // 当滚动超过200像素时隐藏
              child: AppBar(
                title: Text('Vanishing AppBar'),
                backgroundColor: Colors.blue,
              ),
            ),
            Expanded(
              child: ListView.builder(
                itemCount: 50,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text('Item $index'),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们使用了ScrollVanisher来包裹一个Column，其中包含了一个需要隐藏的AppBar和一个ListView。VanishingWidget是scroll_vanisher插件提供的一个Widget，它接受一个offset参数，当滚动超过这个偏移量时，它会隐藏其子Widget。

注意，scrollController: PrimaryScrollController.of(context)用于获取当前Scaffold的滚动控制器。如果你有一个自定义的ScrollController，你也可以直接使用它。

这个示例展示了如何使用scroll_vanisher插件在滚动时隐藏一个AppBar。你可以根据需要调整offset值或应用这个模式到其他需要隐藏或显示的Widget上。

回到顶部