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

原创

已于 2022-08-27 11:15:28 修改 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

于 2022-08-24 12:29:44 首次发布

在Flutter Web项目中遇到ListView无法通过鼠标拖动滚动的问题。尝试了通过点击事件模拟滑动手势，包括监听PointerDownEvent、PointerMoveEvent和PointerUpEvent，但因坐标获取限制导致模拟滚动在页面滚动后失效。最终解决方案是在main.dart中针对Flutter beta分支（2.4.0）更新的鼠标滚动问题，通过在MaterialApp配置中启用mouseScrollBehavior，实现了鼠标拖动滚动的功能。

在完成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.