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

Question

[更新]

\n

我可以确认这个问题发生在2.5以上的flutter中。使用2.2.3就可以了。问题是为什么这个功能在 2.5 中被删除了？那么如何在flutter 2.5中启用它呢？

\n

[起源问题]

\n

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

\n

import \'package:flutter/material.dart\';\n\nvoid main() {\n  runApp(const MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n  const MyApp({Key? key}) : super(key: key);\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: \'Flutter Demo\',\n      theme: ThemeData(\n        primarySwatch: Colors.blue,\n      ),\n      home: SingleChildScrollView(\n        child: Column(\n          children: List<Widget>.generate(50, (i) => Text(i.toString())).toList(),\n        ),\n      ),\n    );\n  }\n}\n

\n

flutter doctor -v\n[\xe2\x9c\x93] 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)\n    \xe2\x80\xa2 Flutter version 2.6.0-6.0.pre.6 at /home/XXX\n    \xe2\x80\xa2 Upstream repository https://github.com/flutter/flutter.git\n    \xe2\x80\xa2 Framework revision 0c5431d99c (12 days ago), 2021-09-05 22:31:02 -0400\n    \xe2\x80\xa2 Engine revision b9c633900e\n    \xe2\x80\xa2 Dart version 2.15.0 (build 2.15.0-82.0.dev)\n\n[\xe2\x9c\x93] Chrome - develop for the web\n    \xe2\x80\xa2 Chrome at google-chrome\n\n[\xe2\x9c\x93] Connected device (2 available)\n    \xe2\x80\xa2 Linux (desktop) \xe2\x80\xa2 linux  \xe2\x80\xa2 linux-x64      \xe2\x80\xa2 Ubuntu 20.04.3 LTS 5.11.0-34-generic\n    \xe2\x80\xa2 Chrome (web)    \xe2\x80\xa2 chrome \xe2\x80\xa2 web-javascript \xe2\x80\xa2 Google Chrome 93.0.4577.82\n

\n

Answer 1

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

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

足够简单...

Answer 2

Flutter 在 2.5 之后改变了鼠标滚动行为。详细请参阅此。

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');
    }
  ),
);

Answer 3

Flutter Web listview 不检测鼠标滚动或拖动事件。您应该添加scrollConfiguration，而不是只有鼠标滚动和触摸事件才起作用。首先用 ScrollConfiguration 包装 listview 并添加行为。您可以在这里查看实例

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()),
      ],
    ),
  ),