Flutter滚动定位插件scroll_to_id的使用

scroll_to_id 是一个用于Flutter的库，允许开发者在ScrollView中通过ID进行滚动定位。下面将详细介绍该插件的安装、初始化及使用方法，并提供完整的示例代码。

安装

要在项目中使用 scroll_to_id ，首先需要将其添加到项目的 pubspec.yaml 文件中的dependencies部分：

dependencies:
  scroll_to_id: ^1.5.1

使用步骤

导入依赖

在Dart文件中导入 scroll_to_id 包：

import 'package:scroll_to_id/scroll_to_id.dart';

创建ScrollController

定义一个 ScrollController 实例来控制滚动行为：

final scrollController = ScrollController();

初始化ScrollToId

创建 ScrollToId 的实例并传入上面定义的 ScrollController ：

ScrollToId scrollToId = ScrollToId(scrollController: scrollController);

构建InteractiveScrollViewer与ScrollContent

接下来，你需要构建一个 InteractiveScrollViewer 组件，它接受 ScrollToId 实例作为参数，并包含一系列 ScrollContent 子组件，每个子组件都有一个唯一的 id 属性，用于标识滚动的目标位置：

InteractiveScrollViewer(
  scrollToId: scrollToId,
  children: <ScrollContent>[
    ScrollContent(
      id: 'a',
      child: Container(
        color: Colors.red,
        width: 300,
        height: 200,
      ),
    ),
    ScrollContent(
      id: 'b',
      child: Container(
        color: Colors.green,
        width: 300,
        height: 200,
      ),
    ),
  ],
)

注意：id 属性是滚动的目标位置，确保不要使用相同的 id 值。

滚动到指定ID

你可以通过调用 animateTo 或 jumpTo 方法使视图滚动到特定的 id 处：

• 动画滚动：

  scrollToId.animateTo(
    'b',
    duration: Duration(milliseconds: 500),
    curve: Curves.ease,
  );
  

• 立即跳转：

  scrollToId.jumpTo('b');
  

此外，还有 animateToNext 和 jumpToNext 方法可以实现滚动到下一个元素的功能。

示例代码

以下是一个完整的示例应用，演示了如何使用 scroll_to_id 插件实现垂直和水平方向上的滚动定位功能：

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ScrollToId? scrollToId;
  final ScrollController scrollController = ScrollController();

  List<Color> _colorList = [
    Colors.green,
    Colors.red,
    Colors.yellow,
    Colors.blue,
  ];

  void _scrollListener() {
    print(scrollToId!.idPosition());
  }

  @override
  void initState() {
    super.initState();

    /// Create ScrollToId instance
    scrollToId = ScrollToId(scrollController: scrollController);

    scrollController.addListener(_scrollListener);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Scroll to id',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Scroll to id'),
        ),
        body: buildStackVertical(),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.navigate_next),
          onPressed: () {
            scrollToId!.animateToNext(
                duration: Duration(milliseconds: 500), curve: Curves.ease);
          },
        ),
      ),
    );
  }

  Widget buildStackVertical() {
    return Stack(
      alignment: Alignment.topRight,
      children: [
        InteractiveScrollViewer(
          scrollToId: scrollToId,
          children: List.generate(10, (index) {
            return ScrollContent(
              id: '$index',
              child: Container(
                alignment: Alignment.center,
                width: double.infinity,
                height: 200,
                child: Text(
                  '$index',
                  style: TextStyle(color: Colors.white, fontSize: 50),
                ),
                color: _colorList[index % _colorList.length],
              ),
            );
          }),
        ),
        Container(
          decoration: BoxDecoration(
            border: Border.all(color: Colors.white, width: 3),
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: List.generate(10, (index) {
              return GestureDetector(
                child: Container(
                  width: 100,
                  alignment: Alignment.center,
                  height: 50,
                  child: Text(
                    '$index',
                    style: TextStyle(color: Colors.white),
                  ),
                  color: _colorList[index % _colorList.length],
                ),
                onTap: () {
                  /// scroll with animation
                  scrollToId!.animateTo('$index',
                      duration: Duration(milliseconds: 500),
                      curve: Curves.ease);

                  /// scroll with jump
                  // scrollToId.jumpTo('$index');
                },
              );
            }),
          ),
        )
      ],
    );
  }

  Widget buildStackHorizontal() {
    return Column(
      children: [
        Container(
          width: double.infinity,
          decoration: BoxDecoration(
            border: Border.all(color: Colors.white, width: 3),
          ),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: List.generate(10, (index) {
              return Expanded(
                child: GestureDetector(
                  child: Container(
                    alignment: Alignment.center,
                    height: 80,
                    child: Text(
                      '$index',
                      style: TextStyle(color: Colors.white),
                    ),
                    color: _colorList[index % _colorList.length],
                  ),
                  onTap: () {
                    /// scroll with animation
                    scrollToId!.animateTo('$index',
                        duration: Duration(milliseconds: 500),
                        curve: Curves.ease);

                    /// scroll with jump
                    // scrollToId.jumpTo('$index');
                  },
                ),
              );
            }),
          ),
        ),
        Expanded(
          child: InteractiveScrollViewer(
            scrollToId: scrollToId,
            scrollDirection: Axis.horizontal,
            children: List.generate(10, (index) {
              return ScrollContent(
                id: '$index',
                child: Container(
                  alignment: Alignment.center,
                  width: 200,
                  child: Text(
                    '$index',
                    style: TextStyle(color: Colors.white, fontSize: 50),
                  ),
                  color: _colorList[index % _colorList.length],
                ),
              );
            }),
          ),
        ),
      ],
    );
  }
}

此示例展示了如何创建一个具有滚动定位功能的应用程序，包括垂直和水平两种滚动方式。用户可以通过点击按钮或列表项来触发滚动动作。