Flutter滚动到顶部插件flutter_scroll_to_top的使用

发布于 1周前 作者 ionicwang 来自 Flutter

Flutter滚动到顶部插件flutter_scroll_to_top的使用

安装

在您的 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 Properties

如果您的 ListView 等 ScrollView 有不同的 scrollController、scrollDirection、primary 或 reverse 参数，则需要将这些参数传递给 ScrollWrapper。ScrollWrapper 提供了一个 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,
            ),
        ),
    ),
)

自定义化

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

  • enabledAtOffset: 在什么滚动偏移量下启用提示。
  • alwaysVisibleAtOffset: 如果设置为 true，则提示始终可见。默认值为 false。
  • scrollOffsetUntilVisible: 用户滚动相反方向多少距离后提示才会出现。
  • scrollOffsetUntilHide: 用户滚动多少距离后提示会隐藏（如果可见）。
  • promptAlignment: 在小部件上对齐提示的位置。
  • promptDuration: 提示出现或消失所需的时间。
  • promptAnimationCurve: 提示出现时遵循的动画曲线。
  • promptAnimationType: 提示动画类型。有三种选项：fade、scale 和 size。
  • scrollToTopDuration: 按下提示按钮后滚动到顶部所需的时间。
  • scrollToTopCurve: 滚动到顶部的动画曲线。
  • 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,
            ),
        ),
    ),
)

提示显示不一致的问题

如果您有多个滚动视图监听同一个 ScrollController，提示可能会显示不一致。这是由于 Flutter 处理这种情况的方式导致的限制。

解决方法是在 ScrollWrapper 中使用修改后的 scrollview 版本。

首先，添加以下导入语句：

import 'package:flutter_scroll_to_top/scroll_view.dart' as scrollview;

然后，将您的 ListView 替换为 scrollview.ListView：

之前

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,
            ),
        ),
    ),
)

之后

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

示例代码

以下是完整的示例代码：

import 'package:example/pages/basic_prompt.dart';
import 'package:example/pages/custom_prompt.dart';
import 'package:example/pages/nested_scroll_view_example.dart';
import 'package:example/pages/themed_prompt.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          appBar: AppBar(
            title: const Text('Scroll to top prompt examples'),
          ),
          body: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ElevatedButton(
                      onPressed: () {
                        Navigator.of(context).push(MaterialPageRoute(
                          builder: (context) => const BasicPrompt(),
                        ));
                      },
                      child: const Text('Basic Prompt'),
                    ),
                    ElevatedButton(
                      onPressed: () {
                        Navigator.of(context).push(MaterialPageRoute(
                          builder: (context) => const ThemedPrompt(),
                        ));
                      },
                      child: const Text('Themed Prompt'),
                    ),
                    ElevatedButton(
                      onPressed: () {
                        Navigator.of(context).push(MaterialPageRoute(
                          builder: (context) => const CustomPrompt(),
                        ));
                      },
                      child: const Text('Custom Prompt'),
                    ),
                    const Flexible(
                      child: Divider(
                        color: Colors.grey,
                        thickness: 1,
                        endIndent: 100,
                        indent: 100,
                      ),
                    ),
                    ElevatedButton(
                      onPressed: () {
                        Navigator.of(context).push(MaterialPageRoute(
                          builder: (context) => const NestedScrollViewExample(),
                        ));
                      },
                      child: const Text('NestedScrollView Implementation'),
                    ),
                  ],
                ),
              ),
            ],
          )),
    );
  }
}

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

1 回复

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


当然，下面是一个关于如何使用 flutter_scroll_to_top 插件的示例代码。这个插件允许你轻松地在 Flutter 应用中实现滚动到顶部的功能。

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

dependencies:
  flutter:
    sdk: flutter
  flutter_scroll_to_top: ^x.x.x  # 请替换为最新版本号

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

接下来，你可以在你的 Flutter 应用中使用这个插件。以下是一个简单的示例，展示了如何在 ListView 中使用 flutter_scroll_to_top 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Scroll to Top Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final ScrollController _scrollController = ScrollController();
  final FlutterScrollToTop _flutterScrollToTop = FlutterScrollToTop();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scroll to Top Example'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.arrow_upward),
            onPressed: () {
              _flutterScrollToTop.scrollToTop(context, _scrollController);
            },
          ),
        ],
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Scrollbar(
              controller: _scrollController,
              child: ListView.builder(
                controller: _scrollController,
                itemCount: 100,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text('Item $index'),
                  );
                },
              ),
            ),
          ),
          // FlutterScrollToTop widget must be placed at the end of the scrollable widget's parent widget
          _flutterScrollToTop,
        ],
      ),
    );
  }

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

在这个示例中，我们创建了一个简单的 ListView，并在 AppBar 中添加了一个按钮，用于触发滚动到顶部的动作。关键步骤如下：

  1. 创建一个 ScrollController 实例来控制 ListView 的滚动。
  2. 创建一个 FlutterScrollToTop 实例。
  3. 在 AppBar 的 actions 中添加一个 IconButton，点击时调用 _flutterScrollToTop.scrollToTop(context, _scrollController) 方法来滚动到顶部。
  4. 将 FlutterScrollToTop 小部件放置在 ListView 的父级 Column 的底部，这是必须的，以确保插件能够正确检测和处理滚动事件。

这样，当你点击 AppBar 上的箭头按钮时，ListView 就会滚动到顶部。希望这个示例能帮助你理解如何在 Flutter 应用中使用 flutter_scroll_to_top 插件。

回到顶部