Flutter列表项快速滚动插件easy_scroll_to_index的使用

Flutter列表项快速滚动插件easy_scroll_to_index的使用

easy_scroll_to_index 是一个用于在 Flutter 中实现列表快速滚动的新包。它支持 ListView, GridView 和 NestedScrollView 的滚动。

作者: DinhVanHung

示例

演示

显示在UI上

要将 easy_scroll_to_index 显示在 UI 上，您可以使用 EasyScrollToIndex。

垂直滚动

final ScrollToIndexController _controller = ScrollToIndexController();

EasyScrollToIndex(
  controller: _controller,            // ScrollToIndexController
  itemCount: 100,                     // 列表项数量
  itemWidth: 50,
  itemHeight: 100,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      width: 50,
      height: 100,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black, width: 1), // 边框
      ),
      child: Center(child: Text('item ' + index.toString())), // 显示索引
    );
  },
),

水平滚动

final ScrollToIndexController _controller = ScrollToIndexController();
            
EasyScrollToIndex(
  controller: _controller,            // ScrollToIndexController
  scrollDirection: Axis.horizontal,   // 默认为垂直方向
  itemCount: 100,                     // 列表项数量
  itemWidth: 50,
  itemHeight: 100,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      width: 50,
      height: 100,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black, width: 1), // 边框
      ),
      child: Center(child: Text('item ' + index.toString())), // 显示索引
    );
  },
),

滚动到指定索引

_controller.easyScrollToIndex(index: 50);

完整示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 easy_scroll_to_index 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: EasyScrollToIndexExample(),
    );
  }
}

class EasyScrollToIndexExample extends StatefulWidget {
  static const path = 'EasyScrollToIndexExample';
  [@override](/user/override)
  EasyScrollToIndexExampleState createState() => EasyScrollToIndexExampleState();
}

class EasyScrollToIndexExampleState extends State<EasyScrollToIndexExample> {
  final ScrollToIndexController _controller = ScrollToIndexController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Easy Scroll To Index Example'),
      ),
      floatingActionButton: TextButton(
        onPressed: () {
          _controller.easyScrollToIndex(index: 50);
        },
        child: Container(
            color: Colors.amberAccent,
            child: const Text('Scroll to index 50')),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            EasyScrollToIndex(
              controller: _controller, // ScrollToIndexController
              scrollDirection: Axis.horizontal, // 默认为垂直方向
              itemCount: 100, // 列表项数量
              itemWidth: 50,
              itemHeight: 100,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  width: 50,
                  height: 100,
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.black, width: 1), // 边框
                  ),
                  child: Center(child: Text('item ' + index.toString())), // 显示索引
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}