为什么Flutter Web端ListView.builder在桌面Chrome浏览器无法滑动

问题根因 #

你遇到的是Flutter旧版本Web端默认滚动行为的适配问题：2.5及更早的Flutter版本中，滚动组件默认仅支持触摸设备的拖拽滑动，桌面端浏览器非响应式模式下，鼠标输入的拖拽事件默认不触发滚动。开启开发者工具响应式模式后，浏览器模拟了触摸输入，因此滑动可以正常触发。

解决方案 #

方案1：全局修改滚动行为（推荐） #

自定义滚动行为配置，将鼠标输入加入支持拖拽的设备类型，全局生效所有滚动组件：

1. 定义自定义ScrollBehavior类

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

class CustomScrollBehavior extends MaterialScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse, // 新增鼠标设备拖拽支持
    PointerDeviceKind.stylus,
  };
}

2. 配置到应用根节点的MaterialApp/CupertinoApp中

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

方案2：单独给指定ListView配置 #

如果不需要全局生效，只给当前页的两个水平ListView添加拖拽支持，可以在每个ListView外层包裹ScrollConfiguration：

ScrollConfiguration(
  behavior: CustomScrollBehavior(),
  child: ListView.builder(
    // 你的原有ListView配置不变
    physics: const AlwaysScrollableScrollPhysics(),
    scrollDirection: Axis.horizontal,
    // ...
  ),
)

方案3：支持鼠标滚轮直接水平滚动 #

默认水平ListView需要按住Shift+鼠标滚轮才能滚动，如果需要实现滚轮直接水平滚动，可以给ListView添加滚轮事件监听：

Listener(
  onPointerSignal: (event) {
    if (event is PointerScrollEvent) {
      final scrollController = PrimaryScrollController.of(context)!;
      // 平滑滚动效果
      scrollController.animateTo(
        scrollController.offset + event.scrollDelta.dy,
        duration: const Duration(milliseconds: 100),
        curve: Curves.linear,
      );
    }
  },
  child: ListView.builder(/* 原有配置不变 */),
)

额外建议 #

你当前使用的是2.5.0的master预览版，本身属于非稳定版本，存在较多Web端适配问题。如果条件允许建议升级到Flutter 3.0及以上的稳定版本，该版本开始对Web端的桌面交互逻辑做了大量优化，很多滚动适配问题已经被官方修复。

内容的提问来源于stack exchange，提问作者ZETA-6PO