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

Question

[更新]

我可以确认这个问题发生在Flutter 2.5以上版本中。使用2.2.3版本是没有问题的。问题变成了为什么在2.5中删除了这个功能？如何在Flutter 2.5中启用它？

[原问题]

我正在使用SingleChildScrollView在桌面浏览器上的Flutter Web上。滚动只能使用鼠标滚轮而不是鼠标单击（拖动）来操作。如何将鼠标单击映射到触摸并像移动设备一样滚动？

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

- Josh Chiu

---

只是无法通过鼠标拖动滚动。 - Josh Chiu

你使用的是主版本，请尝试使用稳定版本，希望它能为你工作。 - Jahidul Islam

调试您的应用程序，然后查找在尝试向下滚动时执行的错误。 - Khaby Lame

尝试使用以下代码：MaterialApp( scrollBehavior: MaterialScrollBehavior().copyWith( dragDevices: {PointerDeviceKind.mouse}, ), - pskink

这不是问题，这是有意为之。 - Mariano Zorrilla

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},
      ),
      ...

足够简单...

- Skquark

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

- Josh Chiu

---

如何进行集成测试？ 我尝试了以下链接，但是滚动似乎没有发生： https://stackoverflow.com/questions/64406214/how-to-test-mouse-scroll-event-on-flutter-widget-tests - Rajesh Patil

Answer 3

Flutter Web的ListView无法检测鼠标滚动或拖动事件。你应该添加ScrollConfiguration，这样只有鼠标滚动和触摸事件才能工作。 首先用ScrollConfiguration包装ListView并添加behavior。你可以在这里看到实时示例。

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

- Kamal Bunkar

Answer 4

在Web开发中，代码有所不同。您需要将ROW与LISTVIEW绑定，然后再将其与m SCROLLCONFIGURATION关联。

Container(
          width: 500,
          height: 200,
          child: ScrollConfiguration(
            behavior: ScrollConfiguration.of(context).copyWith(
              dragDevices: {
                PointerDeviceKind.touch,
                PointerDeviceKind.mouse,
              },
            ),
            child: ListView(
              controller: _controller,
              physics: const AlwaysScrollableScrollPhysics(),
              scrollDirection: Axis.horizontal,
              children: <Widget>[
                                          Container(width: 100, height: 10,color: Colors.red,),
                                          Container(width: 100, height: 10,color: Colors.blue,),
                                          Container(width: 100, height: 10,color: Colors.green,),
                                          Container(width: 100, height: 10,color: Colors.yellow,),
                                          Container(width: 100, height: 10,color: Colors.orange,),
              ],
            ),
          ),
        ),

- W-illian

Answer 5

试试这个，我做到了

class scrollHorizontal extends StatefulWidget{
  State<scrollHorizontal> createState() => _windowsScroll();
}

class _windowsScroll extends State<scrollHorizontal>{
  final ScrollController scrollController = ScrollController();

  @override
  Widget build(BuildContext Context){
    return GestureDetector(
        onHorizontalDragUpdate: (details) {
          // Scroll horizontally when the user drags horizontally (mouse clicks)
          final newScrollOffset = scrollController.offset - (details.delta.dx * 2);
          scrollController.jumpTo(
            newScrollOffset
          );
        },
      child: SingleChildScrollView(
        controller: scrollController,
        scrollDirection: Axis.horizontal,
        child: Row(
          children: [
            // Content Here
          ],
        ),
      ),
    );
  }
}

- ZULKARNAEN