Flutter滚动揭示动画插件reveal_on_scroll的使用

Flutter滚动揭示动画插件reveal_on_scroll的使用

插件介绍

RevealOnScroll 是一个用于在滚动时轻松动画化控件的 Flutter 库。 它旨在坚固且灵活，但希望你会惊讶于它的易用性。通常，你可以使用它来动画化控件或根据当前滚动位置显示/隐藏任何控件。

开始使用

在你的 Flutter 项目中，需要添加以下依赖项：

dependencies:
  ...
  reveal_on_scroll: <latest_version>

在你的库文件中添加以下导入：

import 'package:reveal_on_scroll/reveal_on_scroll.dart';

创建滚动揭示动画

下面的实现允许你通过使用默认动画对每个 FlexCard 进行动画处理。

// _controller 用于管理每个控件的位置
final ScrollController _controller = ScrollController();

ScrollToReveal.withAnimation(
    label: 'Scroll$index',
    scrollController: _controller,
    reflectPosition: -1100,
    animationType: AnimationType.findInLeft,
    child: const FlexCard(),
);

实现滚动行为的三种方式

1. 将一个控件传递给库（此选项带有 ValueChanged 参数，当达到预期位置时返回一个布尔值）。

ScrollToReveal(
   label: 'withChild',
   scrollController: _controller,
   onReached: (value) {
      // 当到达预期位置时执行的操作
   },
   child: Container(
      height: 500,
      color: Colors.red,
  ),
)

1. 使用 ScrollToReveal.builder。这有一个布尔值，在当当前位置达到时返回 true。

ScrollToReveal(
   label: 'header',
   scrollController: _controller,
   onReached: (value) {
      // 当到达预期位置时执行的操作
   },
   widgetBuilder: (show) {
      return Container();
   },
)

1. 使用 ScrollToReveal.withAnimation。这包含一个默认的动画，使用 animate_do（一个允许快速动画的包）实现。

ScrollToReveal.withAnimation(
   label: 'Scroll$index',
   scrollController: _controller,
   reflectPosition: -1100,
   animationType: AnimationType.findInLeft,
   child: const FlexCard(),
)

可选参数

已知问题

目前没有已知的问题。

贡献

• 修复一个bug
• 编写和改进一些文档。文档对我们非常重要。我们非常感谢帮助我们添加多种语言的文档。
• 如果你是开发者，请查看 CONTRIBUTING.MD，了解提交错误、请求新功能、准备代码以提交拉取请求等信息。
• 请别忘了点赞、关注并星标我们的仓库！

示例代码

import 'package:example/example_view.dart';
import 'package:flutter/material.dart';

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

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

  // 这个 widget 是你应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Reveal on Scroll ',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const SimpleWidget(),
    );
  }
}