Flutter 滚动到顶部

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

安装

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

dependencies:
flutter_scroll_to_top: ^2.2.4

导入包

import 'package:flutter_scroll_to_top/flutter_scroll_to_top.dart';

ScrollWrapper

只需将您想显示滚动到顶部的提示的滚动小部件包装在 ScrollWrapper 中即可。

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

ScrollView 属性

如果子 ScrollView 的 scrollController、scrollDirection、primary 或 reverse 参数与默认值不同，您需要将它们作为参数传递给 ScrollWrapper 小部件，因为它需要相同的参数。它在 builder 回调中提供了一个 ScrollViewProperties 对象，您可以使用它来访问 ScrollView 小部件中的属性。

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

自定义

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

  1. enabledAtOffset – 在哪个滚动偏移量启用提示。

  2. alwaysVisibleAtOffset – 如果提示要在提供的偏移量处始终可见。将其设置为 false 只会在用户开始向上滚动时显示提示。默认值为 false。

  3. scrollOffsetUntilVisible – 在提示变得可见之前，用户应该向相反方向滚动多少偏移量。

  4. scrollOffsetUntilHide – 如果提示可见，用户应该滚动多少偏移量才能隐藏自身。

  5. promptAlignment – 提示在小部件上的对齐方式。

  6. promptDuration – 提示进入视图/消失所需的时间。

  7. promptAnimationCurve – 提示进入视图时将遵循的动画曲线。

  8. promptAnimationType – 提示在动画时遵循的 PromptAnimation。有三种选项：fade、scale 和 size。

  9. scrollToTopDuration – 点击提示按钮时页面滚动到顶部所需的时间。

  10. scrollToTopCurve – 滚动到顶部的动画曲线。

  11. promptTheme – 您可以传递 PromptButtonTheme 来进一步修改提示按钮。它具有以下参数：padding – 提示按钮周围的内边距。iconPadding – 按钮内图标周围的内边距。icon – 按钮内的图标。color – 提示按钮的颜色。elevation – 按钮的阴影。

ScrollWrapper(
 promptAlignment: Alignment.topCenter,
 promptAnimationCurve: Curves.elasticInOut,
 promptDuration: const Duration(milliseconds: 400),
 enabledAtOffset: 300,
 scrollOffsetUntilVisible: 500,
 promptTheme: const PromptButtonTheme(
 icon: Icon(Icons.arrow_circle_up, color: Colors.amber),
 color: Colors.deepPurpleAccent,
 iconPadding: EdgeInsets.all(16),
 padding: EdgeInsets.all(32)),
 builder: (context, properties) => ListView.builder(
     controller: properties.scrollController,
     scrollDirection: properties.scrollDirection,
     reverse: properties.reverse,
     primary: properties.primary,
         itemBuilder: (context, index) => Padding(
         padding: const EdgeInsets.all(8.0),
         child: ListTile(
             title: Text('Tile $index'),
             tileColor: Colors.grey.shade200,
         ),
     ),
 ),
)

自定义提示小部件

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

ScrollWrapper(
 promptReplacementBuilder: (context, function) => MaterialButton(
     onPressed: () => function(),
     child: const Text('Scroll to top'),
 ),
 builder: (context, properties) => ListView.builder(
     controller: properties.scrollController,
     scrollDirection: properties.scrollDirection,
     reverse: properties.reverse,
     primary: properties.primary,
     itemBuilder: (context, index) => Padding(
         padding: const EdgeInsets.all(8.0),
         child: ListTile(
             title: Text('Tile $index'),
             tileColor: Colors.grey.shade200,
         ),
     ),
 ),
)

GitHub

查看 Github