Dartpad运行Flutter Web代码时ListView.builder无法滚动如何解决？

问题原因 #

1. 现有代码未配置横向滚动参数：ListView.builder默认滚动方向为纵向Axis.vertical，要实现横向滚动需要显式指定scrollDirection参数。
2. Dartpad Web环境的默认滚动行为限制：Flutter Web默认仅支持触摸事件、鼠标滚轮触发滚动，桌面端浏览器中直接用鼠标拖拽列表默认无法触发滚动，会让人误以为列表无法正常滚动。

可行修复方案 #

方案1：修改代码适配滚动需求+兼容Dartpad测试场景 #

如果要实现横向滚动效果，同时支持在Dartpad中用鼠标拖拽测试滚动，需要做三处调整：

• 给ListView.builder添加scrollDirection: Axis.horizontal配置指定横向滚动
• 给全局配置scrollBehavior，放开鼠标拖拽触发滚动的限制
• 横向滚动场景下给子组件指定明确宽度，避免布局报错
  修改后的完整代码如下：

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

void main() {
  runApp(
    MyApp(
      items: List<String>.generate(100, (i) => 'Item $i'),
    ),
  );
}

class MyApp extends StatelessWidget {
  final List<String> items;

  const MyApp({Key? key, required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const title = 'Long List';

    return MaterialApp(
      title: title,
      // 新增滚动行为配置，支持鼠标拖拽触发滚动
      scrollBehavior: const MaterialScrollBehavior().copyWith(
        dragDevices: {PointerDeviceKind.mouse, PointerDeviceKind.touch, PointerDeviceKind.stylus, PointerDeviceKind.trackpad}
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: ListView.builder(
          // 不需要横向滚动时删除该行即可恢复纵向滚动
          scrollDirection: Axis.horizontal,
          itemCount: items.length,
          itemBuilder: (context, index) {
            // 横向滚动时必须给子组件指定明确宽度
            return SizedBox(
              width: 150,
              child: ListTile(
                title: Text(items[index]),
              ),
            );
          },
        ),
      ),
    );
  }
}

方案2：无需修改代码的验证方法 #

如果仅要验证原有纵向代码的滚动逻辑是否正常：

• 在Dartpad中切换为移动端预览模式，用模拟触摸操作拖拽即可滚动
• 桌面端预览模式下直接用鼠标滚轮滚动列表即可触发滚动效果

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