Flutter滚动定位插件scroll_to_position的使用

Scroll To Index

一个用于ListView元素滚动到当前索引的项目。
它允许程序化地滚动到特定索引。
它被配置为在0.2秒内滚动到索引10。你可以根据需求修改索引和持续时间。
PreferPosition 的值范围为0到1.0（0表示控制器滚动到屏幕顶部，0.5表示控制器滚动到屏幕中心，1表示控制器滚动到底部）。

import 'dart:math';

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

import 'package:scroll_to_position/scroll_to_position.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是你的应用的根组件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  AutoScrollController scrollController = AutoScrollController();

  [@override](/user/override)
  void initState() {
    super.initState();
    scrollController = AutoScrollController(
      viewportBoundaryGetter: () =>
          Rect.fromLTRB(0, 0, 0, MediaQuery.of(context).padding.bottom),
      axis: Axis.vertical,
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        controller: scrollController,
        shrinkWrap: true,
        itemCount: 20,
        itemBuilder: (context, index) {
          return AutoScrollTag(
            key: ValueKey(index),
            controller: scrollController,
            index: index,
            child: Container(
              height: 250,
              color: Colors.primaries[Random().nextInt(Colors.primaries.length)],
              child: Center(
                child: Text(
                  '$index',
                  style: const TextStyle(
                    fontSize: 25,
                  ),
                ),
              ),
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          scrollController.scrollToIndex(
            10,
            preferPosition: 0.5,
            duration: Duration(seconds: 200),
          );
        },
      ),
    );
  }
}

示例代码

example/lib/main.dart

import 'dart:math';

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

import 'package:scroll_to_position/scroll_to_position.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是你的应用的根组件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  AutoScrollController scrollController = AutoScrollController();

  [@override](/user/override)
  void initState() {
    super.initState();
    scrollController = AutoScrollController(
      viewportBoundaryGetter: () =>
          Rect.fromLTRB(0, 0, 0, MediaQuery.of(context).padding.bottom),
      axis: Axis.vertical,
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        controller: scrollController,
        shrinkWrap: true,
        itemCount: 20,
        itemBuilder: (context, index) {
          return AutoScrollTag(
            key: ValueKey(index),
            controller: scrollController,
            index: index,
            child: Container(
              height: 250,
              color: Colors.primaries[Random().nextInt(Colors.primaries.length)],
              child: Center(
                child: Text(
                  '$index',
                  style: const TextStyle(
                    fontSize: 25,
                  ),
                ),
              ),
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          scrollController.scrollToIndex(
            10,
            preferPosition: 0.5,
            duration: Duration(seconds: 200),
          );
        },
      ),
    );
  }
}

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

bupafengyu 1楼•3 天前

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

当然，下面是一个关于如何使用Flutter的scroll_to_position插件来实现滚动定位的代码示例。这个插件允许你在ListView或任何可滚动的Widget中滚动到特定的位置。

首先，确保你已经在pubspec.yaml文件中添加了scroll_to_index依赖（注意：scroll_to_position可能不是一个广泛认知的Flutter包，这里以类似的scroll_to_index为例，因为核心功能是相似的。如果你确实有一个特定的scroll_to_position包，请确保使用正确的包名和导入语句）。如果你确实需要精确定位到某个像素位置，可以使用Flutter内置的滚动控制器方法。

dependencies:
  flutter:
    sdk: flutter
  scroll_to_index: ^2.0.0  # 请根据需要调整版本

然后，在你的Dart文件中，你可以这样使用它：

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(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Scroll to Position Example'),
        ),
        body: ScrollToPositionExample(),
      ),
    );
  }
}

class ScrollToPositionExample extends StatefulWidget {
  @override
  _ScrollToPositionExampleState createState() => _ScrollToPositionExampleState();
}

class _ScrollToPositionExampleState extends State<ScrollToPositionExample> {
  final List<String> items = List.generate(100, (index) => "Item $index");
  late AutoScrollController controller;

  @override
  void initState() {
    super.initState();
    controller = AutoScrollController(
      viewportBoundaryGetter: () =>
          Rect.fromLTWH(0, 0, 0, MediaQuery.of(context).size.height),
      axis: Axis.vertical,
    );
  }

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

  void scrollToIndex(int index) {
    controller.animateTo(
      index: index,
      duration: const Duration(seconds: 1),
      curve: Curves.easeInOut,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
          onPressed: () => scrollToIndex(50), // 滚动到第50项
          child: Text('Scroll to Item 50'),
        ),
        Expanded(
          child: AutoScrollTaggedListView(
            controller: controller,
            itemCount: items.length,
            itemBuilder: (_, index) {
              return AutoScrollTag(
                key: ValueKey(items[index]),
                controller: controller,
                index: index,
                child: ListTile(
                  title: Text(items[index]),
                ),
              );
            },
          ),
        ),
      ],
    );
  }
}

在这个例子中，我们使用了scroll_to_index包，它提供了AutoScrollController和AutoScrollTaggedListView等组件来实现滚动到指定索引的功能。你可以通过点击按钮来滚动到列表中的特定项。

如果你确实需要使用一个叫做scroll_to_position的插件，并且它有特定的API，你应该参考该插件的文档来替换上述代码中的相关部分。不过，Flutter自带的滚动控制器（ScrollController）通常已经足够用来实现滚动到特定位置的功能，如下所示：

// 使用Flutter内置的ScrollController滚动到特定位置
controller.jumpTo(index * itemHeight); // index是你想滚动的项的索引，itemHeight是每个项的高度

请根据你的具体需求调整上述代码。