Flutter中ScrollablePositionedList自动滚动时无法手动滚动的解决方法

核心思路是通过监听用户的拖动手势，在用户开始操作时立即终止自动滚动任务，具体实现步骤如下：

• 用Timer维护自动滚动的定时任务，控制列表滚动到指定索引
• 给ScrollablePositionedList包裹GestureDetector，监听拖动起始事件来停止自动滚动
• 可选：拖动结束后恢复自动滚动（根据业务需求决定）

完整代码示例 #

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';

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

  @override
  State<AutoScrollListPage> createState() => _AutoScrollListPageState();
}

class _AutoScrollListPageState extends State<AutoScrollListPage> {
  final ItemScrollController itemScrollController = ItemScrollController();
  Timer? autoScrollTimer;
  int currentIndex = 0;
  final int totalItems = 20;

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

  // 启动自动滚动
  void startAutoScroll() {
    autoScrollTimer = Timer.periodic(const Duration(seconds: 2), (_) {
      currentIndex = (currentIndex + 1) % totalItems;
      itemScrollController.scrollTo(
        index: currentIndex,
        duration: const Duration(milliseconds: 500),
        curve: Curves.easeInOut,
      );
    });
  }

  // 停止自动滚动
  void stopAutoScroll() {
    autoScrollTimer?.cancel();
    autoScrollTimer = null;
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('自动滚动列表')),
      body: GestureDetector(
        // 用户开始拖动时停止自动滚动
        onPanStart: (_) => stopAutoScroll(),
        // 可选：拖动结束后恢复自动滚动
        onPanEnd: (_) => startAutoScroll(),
        child: ScrollablePositionedList.builder(
          itemCount: totalItems,
          itemScrollController: itemScrollController,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text('列表项 $index'),
              contentPadding: const EdgeInsets.all(16),
            );
          },
        ),
      ),
    );
  }
}

关键说明 #

• GestureDetector的onPanStart会在用户开始拖动列表时触发，此时调用stopAutoScroll()取消定时任务，列表就会停止自动滚动，允许手动操作
• 如果业务不需要拖动后恢复自动滚动，直接移除onPanEnd的回调即可
• 务必在页面销毁时调用stopAutoScroll()，避免内存泄漏

内容的提问来源于stack exchange，提问作者viki