Flutter列表滚动定位插件scroll_to_index的使用

scroll_to_index 插件为Flutter提供了滚动到指定索引的功能，适用于固定或可变行高的可滚动组件。下面将详细介绍其用法，并提供一个完整的示例。

依赖添加

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  ...
  scroll_to_index: any

然后在 Dart 文件中导入此包：

import 'package:scroll_to_index/scroll_to_index.dart';

使用方法

基础用法

scroll_to_index 是一个基于组件级别的库，这意味着你可以在任何Flutter的可滚动组件中使用它。以 ListView 为例：

ListView(
  scrollDirection: scrollDirection,
  controller: controller, // 使用AutoScrollController作为controller
  children: randomList.map<Widget>((data) {
    final index = data[0];
    final height = data[1];
    return AutoScrollTag(
      key: ValueKey(index),
      controller: controller,
      index: index,
      child: Text('index: $index, height: $height'),
      highlightColor: Colors.black.withOpacity(0.1), // 高亮颜色
    );
  }).toList(),
)

你可以将任意具有动态高度的行组件包裹在 AutoScrollTag 中，以便支持滚动到指定索引功能。

当需要触发滚动到指定索引时，可以通过调用 controller.scrollToIndex 方法来实现：

controller.scrollToIndex(index, preferPosition: AutoScrollPosition.begin);

高级配置

对于有固定行高或者希望提高滚动效率的情况，可以为 AutoScrollController 提供更多配置选项，例如：

final controller = AutoScrollController(
  viewportBoundaryGetter: () => Rect.fromLTRB(0, 0, 0, MediaQuery.of(context).padding.bottom), // 视口边界获取器
  axis: scrollDirection, // 滚动方向
  suggestedRowHeight: 200, // 建议行高
);

这允许你在初始化控制器时就设定好视口边界、滚动方向以及建议的行高等参数，从而优化滚动体验。

完整示例

接下来是一个完整的例子，展示了如何结合上述知识点创建一个可以滚动到指定位置的应用程序：

import 'dart:math' as math;
import 'package:flutter/material.dart';
import 'package:scroll_to_index/scroll_to_index.dart';

void main() => runApp(MyApp());

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static const maxCount = 100;
  static const double maxHeight = 1000;
  final random = math.Random();
  final scrollDirection = Axis.vertical;

  late AutoScrollController controller;
  late List<List<int>> randomList;
  int counter = -1;

  @override
  void initState() {
    super.initState();
    controller = AutoScrollController(
        viewportBoundaryGetter: () =>
            Rect.fromLTRB(0, 0, 0, MediaQuery.of(context).padding.bottom),
        axis: scrollDirection);
    randomList = List.generate(maxCount,
        (index) => <int>[index, (maxHeight * random.nextDouble()).toInt()]);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          IconButton(
            onPressed: () {
              setState(() => counter = 0);
              _scrollToCounter();
            },
            icon: Text('First'),
          ),
          IconButton(
            onPressed: () {
              setState(() => counter = maxCount - 1);
              _scrollToCounter();
            },
            icon: Text('Last'),
          )
        ],
      ),
      body: ListView(
        scrollDirection: scrollDirection,
        controller: controller,
        children: randomList.map<Widget>((data) {
          return Padding(
            padding: EdgeInsets.all(8),
            child: _getRow(data[0], math.max(data[1].toDouble(), 50.0)),
          );
        }).toList(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _nextCounter,
        tooltip: 'Increment',
        child: Text(counter.toString()),
      ),
    );
  }

  Future _nextCounter() async {
    setState(() => counter = (counter + 1) % maxCount);
    await _scrollToCounter();
  }

  Future _scrollToCounter() async {
    await controller.scrollToIndex(counter,
        preferPosition: AutoScrollPosition.begin);
    controller.highlight(counter);
  }

  Widget _getRow(int index, double height) {
    return _wrapScrollTag(
        index: index,
        child: Container(
          padding: EdgeInsets.all(8),
          alignment: Alignment.topCenter,
          height: height,
          decoration: BoxDecoration(
              border: Border.all(color: Colors.lightBlue, width: 4),
              borderRadius: BorderRadius.circular(12)),
          child: Text('index: $index, height: $height'),
        ));
  }

  Widget _wrapScrollTag({required int index, required Widget child}) =>
      AutoScrollTag(
        key: ValueKey(index),
        controller: controller,
        index: index,
        child: child,
        highlightColor: Colors.black.withOpacity(0.1),
      );
}

这个例子创建了一个包含100个随机高度条目的列表，并且可以通过点击应用栏上的按钮或者浮动按钮来滚动到不同的位置。同时，在每次滚动后会高亮显示当前选中的条目。