Flutter Web端水平ListView鼠标滚轮滚动失效问题如何解决

方法1：全局配置滚动行为（全项目生效） #

修改全局滚动规则后，项目内所有水平滚动组件默认支持鼠标操作，无需逐个适配。
首先在main.dart中自定义滚动行为类：

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

class CustomScrollBehavior extends MaterialScrollBehavior {
  // 允许鼠标拖拽滚动
  @override
  Set<PointerDeviceKind> get dragDevices => {
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse,
  };

  // 适配鼠标滚轮滚动逻辑
  @override
  ScrollPhysics getScrollPhysics(BuildContext context) {
    return const AlwaysScrollableScrollPhysics();
  }
}

之后将自定义滚动行为配置到MaterialApp/CupertinoApp的scrollBehavior属性：

MaterialApp(
  scrollBehavior: CustomScrollBehavior(),
  // 其余原有配置不变
  home: const MyHomePage(),
)

配置完成后，正常滚动鼠标滚轮即可触发水平ListView滚动，也支持按住鼠标直接拖拽滚动。

方法2：仅为当前ListView单独配置 #

如果不需要修改全局规则，仅需要这一个水平ListView支持鼠标滚轮，可以用滚动控制器+事件监听实现：

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

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

  @override
  State<HorizontalListPage> createState() => _HorizontalListPageState();
}

class _HorizontalListPageState extends State<HorizontalListPage> {
  final ScrollController _scrollController = ScrollController();

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

  @override
  Widget build(BuildContext context) {
    return Listener(
      onPointerSignal: (event) {
        if (event is PointerScrollEvent) {
          // 鼠标滚轮滚动时手动修改滚动偏移，系数可自行调整滚动速度
          _scrollController.animateTo(
            _scrollController.offset + event.scrollDelta.dy * 1.2,
            duration: const Duration(milliseconds: 100),
            curve: Curves.easeInOut,
          );
        }
      },
      child: ListView(
        controller: _scrollController,
        scrollDirection : Axis.horizontal,
        children: <Widget>[
          Container(width: 160.0, color: Colors.red),
          Container(width: 160.0, color: Colors.blue),
          Container(width: 160.0, color: Colors.green),
          Container(width: 160.0, color: Colors.yellow),
          Container(width: 160.0, color: Colors.orange),
        ],
      ),
    );
  }
}

临时测试方案（无需修改代码） #

如果只是临时验证功能效果，可以直接用两种操作触发滚动：

• 按住鼠标左键拖拽水平ListView的内容区域
• 使用笔记本触摸板双指横向滑动内容区域

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