Flutter Web鼠标、触控板及触屏的平滑自定义滚动控制方案咨询

一、自定义ScrollBehavior解决核心兼容问题 #

Flutter默认的ScrollBehavior可能未完全适配Web触控板，自定义后可同时实现平滑滚动和全设备支持：

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class SmoothScrollBehavior extends ScrollBehavior {
  @override
  Widget buildOverscrollIndicator(BuildContext context, Widget child, ScrollableDetails details) => child;

  @override
  ScrollPhysics getScrollPhysics(BuildContext context) => const ClampingScrollPhysics();

  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
        PointerDeviceKind.trackpad,
      };

  @override
  ScrollPosition createScrollPosition(ScrollPhysics physics, ScrollContext context, ScrollPosition oldPosition) {
    return _SmoothScrollPosition(physics: physics, context: context, oldPosition: oldPosition);
  }
}

class _SmoothScrollPosition extends ScrollPositionWithSingleContext {
  _SmoothScrollPosition({
    required super.physics,
    required super.context,
    super.oldPosition,
  });

  @override
  void goTo(double value, {Duration duration = const Duration(milliseconds: 300), Curve curve = Curves.easeInOut}) {
    animateTo(value, duration: duration, curve: curve);
  }
}

应用方式 #

• 全局生效（推荐）：

MaterialApp(
  scrollBehavior: SmoothScrollBehavior(),
  // 其他配置
)

• 局部生效：

ScrollConfiguration(
  behavior: SmoothScrollBehavior(),
  child: ListView(
    controller: _scrollController,
    // 列表内容
  ),
)

二、用ScrollController手动控制平滑滚动 #

无论采用哪种滚动行为，都可以通过ScrollController.animateTo实现程序化平滑滚动，完全兼容所有输入设备：

final ScrollController _scrollController = ScrollController();

// 滚动到顶部
void scrollToTop() {
  _scrollController.animateTo(
    0,
    duration: const Duration(milliseconds: 400),
    curve: Curves.easeOut,
  );
}

// 滚动到指定位置
void scrollToOffset(double offset) {
  _scrollController.animateTo(
    offset,
    duration: const Duration(milliseconds: 300),
    curve: Curves.easeInOut,
  );
}

三、第三方插件替代方案 #

如果不想自定义，可使用smooth_scroll_web插件，专门针对Web优化，原生支持触控板、鼠标和触屏，且兼容ScrollController：

1. 添加依赖到pubspec.yaml：

dependencies:
  smooth_scroll_web: ^0.1.0 # 请使用最新版本

2. 使用示例：

SmoothScrollWeb(
  controller: _scrollController,
  child: ListView.builder(
    itemCount: 50,
    itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
  ),
)

注意事项 #

• 必须确保dragDevices包含PointerDeviceKind.trackpad，这是解决触控板无法滚动的关键
• 避免同时启用多个平滑滚动插件，防止行为冲突
• 务必在真实笔记本触控板环境测试，模拟器可能无法还原真实触控板交互

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