flutter_scroll_to_top

一个包装器，可以在可滚动小部件上向用户显示滚动到顶部的提示。

安装

将以下依赖项添加到您的 pubspec.yaml 文件中

dependencies:
  flutter_scroll_to_top: ^1.1.0

导入包

import 'package:flutter_scroll_to_top/flutter_scroll_to_top.dart';

ScrollWrapper

只需将您想要显示滚动到顶部提示的滚动部件包装在 ScrollWrapper 中，并将该滚动部件的 ScrollController 提供给包装器。

ScrollWrapper(
        scrollController: scrollController,
        child: ListView.builder(
          controller: scrollController,
          itemBuilder: (context, index) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: ListTile(
              title: Text('Tile $index'),
              tileColor: Colors.grey.shade200,
            ),
          ),
        ),
      ),

自定义

您可以传递以下参数来自定义提示

  • promptScrollOffset - 在什么滚动偏移量处显示提示。
  • promptAlignment - 提示在小部件上的对齐方式。
  • promptDuration - 提示出现/消失所需的时间。
  • promptAnimationCurve - 提示出现时遵循的动画曲线。
  • promptAnimationType - 提示在动画时遵循的 PromptAnimation。有三个选项：fade（淡入淡出）、scale（缩放）和 size（尺寸）。
  • scrollToTopDuration - 在按下提示按钮时滚动到顶部的页面所需的时间。
  • scrollToTopCurve - 滚动到顶部的动画曲线。
  • promptTheme - 您可以传递 PromptButtonTheme 来进一步修改提示按钮。它具有以下参数
    • padding - 提示按钮周围的内边距。
    • iconPadding - 按钮内图标周围的内边距。
    • icon - 按钮内的图标。
    • color - 提示按钮的颜色。
ScrollWrapper(
        scrollController: scrollController,
        promptAlignment: Alignment.topCenter,
        promptAnimationCurve: Curves.elasticInOut,
        promptDuration: Duration(milliseconds: 400),
        promptScrollOffset: 300,
        promptTheme: PromptButtonTheme(
            icon: Icon(Icons.arrow_circle_up, color: Colors.amber),
            color: Colors.deepPurpleAccent,
            iconPadding: EdgeInsets.all(16),
            padding: EdgeInsets.all(32)),
        child: ListView.builder(
          controller: scrollController,
          itemBuilder: (context, index) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: ListTile(
              title: Text('Tile $index'),
              tileColor: Colors.grey.shade200,
            ),
          ),
        ),
      ),

自定义提示小部件

您可以通过 promptReplacementBuilder 参数传递您选择的小部件来替换默认提示小部件。

ScrollWrapper(
        scrollController: scrollController,
        promptReplacementBuilder: (BuildContext context, Function scrollToTop) {
          return MaterialButton(
            onPressed: () {
              scrollToTop();
            },
            child: Text('Scroll to top'),
          );
        },
        child: ListView.builder(
          controller: scrollController,
          itemBuilder: (context, index) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: ListTile(
              title: Text('Tile $index'),
              tileColor: Colors.grey.shade200,
            ),
          ),
        ),
      )

NestedScrollView 实现

实现类似，只需将您的可滚动主体包装在 ScrollWrapper 中，并将父级 NestsedScrollView 的控制器传递给包装器。

请参阅示例代码。

GitHub

https://github.com/NamanShergill/flutter_scroll_to_top