Flutter Web：无法用鼠标向下滚动（拖动）（Flutter 2.5+）答案

【问题标题】：Flutter Web: Cannot scroll with mouse down (drag) (Flutter 2.5+)Flutter Web：无法用鼠标向下滚动（拖动）（Flutter 2.5+）
【发布时间】：2021-11-12 21:11:44
【问题描述】：

[更新]

我可以确认这个问题发生在 Flutter 2.5 以上。使用 2.2.3 很好。问题变成了为什么这个特性在 2.5 中被移除了？以及如何在flutter 2.5中启用它？

[原题]

我在带有桌面浏览器的 Flutter Web 上使用 SingleChildScrollView。滚动仅适用于鼠标滚轮，但不适用于鼠标单击（拖动）。如何将鼠标单击映射为像移动设备一样触摸和滚动？

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SingleChildScrollView(
        child: Column(
          children: List<Widget>.generate(50, (i) => Text(i.toString())).toList(),
        ),
      ),
    );
  }
}

flutter doctor -v
[✓] Flutter (Channel master, 2.6.0-6.0.pre.6, on Ubuntu 20.04.3 LTS 5.11.0-34-generic, locale en_US.UTF-8)
    • Flutter version 2.6.0-6.0.pre.6 at /home/XXX
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 0c5431d99c (12 days ago), 2021-09-05 22:31:02 -0400
    • Engine revision b9c633900e
    • Dart version 2.15.0 (build 2.15.0-82.0.dev)

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Connected device (2 available)
    • Linux (desktop) • linux  • linux-x64      • Ubuntu 20.04.3 LTS 5.11.0-34-generic
    • Chrome (web)    • chrome • web-javascript • Google Chrome 93.0.4577.82

【问题讨论】：

你发现了什么错误？
没有错误。只是无法通过鼠标拖动滚动
但在我的机器上，它运行良好
你用的是master版，试试用stable版，希望对你有用。
调试您的应用，然后在您尝试向下滚动时找出正在执行的错误

标签： flutter dart flutter-web

【解决方案1】：

Flutter 在 2.5 之后更改鼠标滚动行为。详情请见this。

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  // Override behavior methods and getters like dragDevices
  @override
  Set<PointerDeviceKind> get dragDevices => { 
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse,
    // etc.
  };
}

// ScrollBehavior can be set for a specific widget.
final ScrollController controller = ScrollController();
ScrollConfiguration(
  behavior: MyCustomScrollBehavior(),
  child: ListView.builder(
    controller: controller,
    itemBuilder: (BuildContext context, int index) {
     return Text('Item $index');
    }
  ),
);

【讨论】：

【解决方案2】：

Flutter Web listview 不检测鼠标滚动或拖动事件。您应该添加 scrollConfiguration 而不是只有鼠标滚动和触摸事件才会起作用。首先用 ScrollConfiguration 包装 listview 并添加行为。可以看live example here

ScrollConfiguration(
    behavior: ScrollConfiguration.of(context).copyWith(dragDevices: {
      PointerDeviceKind.touch,
      PointerDeviceKind.mouse,
    },),
    child: ListView(
      controller: _controller,
      physics: const AlwaysScrollableScrollPhysics(),
      scrollDirection: Axis.horizontal,
      children: <Widget>[
      
          for (int index = 0; index < showThumbnailList.length; index++) _thumbnail(showThumbnailList[index], index)
       
        // showThumbnailList.map((x) => _thumbnail(x) ).toList()),
      ],
    ),
  ),

【讨论】：

【解决方案3】：

我的最终解决方案是结合建议，希望到处拖动滚动，所以使用了这个：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      scrollBehavior: MaterialScrollBehavior().copyWith(
        dragDevices: {PointerDeviceKind.mouse, PointerDeviceKind.touch, PointerDeviceKind.stylus, PointerDeviceKind.unknown},
      ),
      ...

够简单...

【讨论】：