flutter web项目中鼠标拖动无法实现滚动效果

在完成web的flutter项目时，发现ListView列表使用鼠标拖动无法滚动，尝试发现使用触摸板可以实现滚动，但如果用户使用没有触摸板的电脑或列表为横向滚动时就无法实现项目需求了，在解决问题的过程中尝试了以下方法：

1.尝试使用点击事件模拟滑动手势

如果web项目中无法使用鼠标进行拖动，那是否可以考虑设置一个按钮，当点击该按钮时模拟触发滑动手势实现滚动效果。

整个过程触发三个事件，鼠标按下（PointerDownEvent ）、鼠标拖动（PointerMoveEvent ）、鼠标弹起（PointerUpEvent ），同时我们需要知道模拟滑动手势的一些数据信息，即鼠标按下、鼠标弹起的坐标，鼠标拖动的距离，以此来判断我们模拟的滚动是对哪个ListView实现的。

获取某个Widget的坐标：给目标Widget设置key属性，再获取设置key属性Widget的坐标位置

Widget _demo(){
    GlobalKey _globalKey = new GlobalKey();
    return GestureDetector(
        ontap: (){
            //点击获取目标Widget坐标位置
            RenderBox box = _globalKey.currentContext.findRenderObject();
            Offset offset = box.localToGlobal(Offset.zero);
            print('widget位置：${offset}'); //widget位置：Offset(80.0, 182.0)
        }，
        child: Container(
            key: _globalKey, //目标Widget设置key属性
            child: ListView.builder(...)
        )
    );
}

模拟滚动事件：上一步骤获取到目标Widget坐标位置为(80.0,182.0)，该坐标为Widget左上角处在屏幕中的位置，因此在设置鼠标按下位置坐标时可以自己按需求设置

void _pressMove() async {
  const PointerEvent downPointer =  PointerDownEvent(
      pointer: 1,
      position: Offset(500.0, 200)
  );
  GestureBinding.instance.handlePointerEvent(downPointer);
  double dy = 20;
  double updateCount = 10;
  for (int i = 0; i < 10; i++) {
    await Future.delayed(const Duration(milliseconds: 6));
    PointerEvent movePointer =  PointerMoveEvent(
        pointer: 1,
        delta: Offset(-dy, 0),
        position: Offset(500 - i * dy, 200)
    );
    GestureBinding.instance.handlePointerEvent(movePointer);
    GestureBinding.instance.handlePointerEvent(movePointer);
  }

  PointerEvent upPointer = PointerUpEvent(
      pointer: 1,
      position: Offset(500 - dy * updateCount, 200)
  );
  GestureBinding.instance.handlePointerEvent(upPointer);
}

在点击事件中执行模拟滚动事件后实现模拟滚动效果，但该方法在获取目标Widget坐标位置时只能获取到相对于屏幕的位置，若页面向下滚动后原来的目标Widget不再在获取到坐标位置，则模拟滑动失效，因此考虑别的方法。

2.在main.dart中增加配置内容

在查找资料的过程中看到 flutter beta 分支（2.4.0) 更新后，桌面应用不能通过鼠标拖动的方式来滚动列表了，解决方式：

找到MaterialApp创建的地方，一般为main.dart文件，在MaterialApp中增加以下配置内容

import 'dart:ui';

return MaterialApp(
    scrollBehavior: const MaterialScrollBehavior().copyWith(
        scrollbars: true,
        dragDevices: _kTouchLikeDeviceTypes
    ),
    ......
)

const Set<PointerDeviceKind> _kTouchLikeDeviceTypes = <PointerDeviceKind>{
  PointerDeviceKind.touch,
  PointerDeviceKind.mouse,
  PointerDeviceKind.stylus,
  PointerDeviceKind.invertedStylus,
  PointerDeviceKind.unknown
};

该方法可以通过鼠标拖动实现滑动效果。