当指针到达边缘时颤动滚动屏幕

问题描述

我有一个包含可拖动项目的 GridView。当一个项目被拖到屏幕的顶部/底部时，我想在那个方向滚动 GridView。

目前我将每个可拖动的项目包裹在一个监听器中，如下所示：

Listener(
      child: _wrap(widget.children[i],i),onPointerMove: (PointerMoveEvent event) {
        if (event.position.dy >= MediaQuery.of(context).size.height - 100) {
          // 120 is height of your draggable.
          widget.scrollController.animateto(
            widget.scrollController.offset + 120,curve: Curves.eaSEOut,duration: const Duration(milliseconds: 200));
        }if (event.position.dy <= kToolbarHeight + MediaQueryData.fromWindow(window).padding.top + 100) {
          // 120 is height of your draggable.
          widget.scrollController.animateto(
              widget.scrollController.offset - 120,duration: const Duration(milliseconds: 200));
        }
      }
    )

它有效，但滚动根本不流畅，看起来有点滞后。 我也需要它在网络上工作。

有没有人有更好的解决方案？

解决方法

这是我解决它的方法。使用 TickerProviderStateMixin，您可以获得一个每帧调用一次回调的 Ticker，您可以在其中稍微调整滚动偏移量以获得平滑滚动。我使用 Stack 将虚拟 DragTargets 添加到控制代码的列表区域的顶部和底部。我每边使用了两个，以允许不同的滚动速度。如果您想要更细粒度的控制，您可能可以使用侦听器通过光标位置插入速度。

https://www.dartpad.dev/acb83fdbbbbb0fd765cd5afa414a8942

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),body: Stack(
      children: [
        ListView.separated(
          controller: controller,itemCount: 50,itemBuilder: (context,index) {
            return buildLongPressDraggable(index);
          },separatorBuilder: (context,index) {
            return Divider();
          },),Positioned(
            top: 0,left: 0,right: 0,height: 25,child: buildEdgeScroller(-10)),Positioned(
            top: 25,child: buildEdgeScroller(-5)),Positioned(
            bottom: 25,child: buildEdgeScroller(5)),Positioned(
            bottom: 0,child: buildEdgeScroller(10)),],);
}

Widget buildEdgeScroller(double offsetPerFrame) {
  return DragTarget<int>(
    builder: (context,candidateData,rejectedData) => Container(),onWillAccept: (data) {
      scrollTicker = this.createTicker((elapsed) {
        if (!controller.hasClients) {
          return;
        }
        final position = controller.position;
        if ((offsetPerFrame < 0 && position.pixels <= position.minScrollExtent) ||
            (offsetPerFrame > 0 && position.pixels >= position.maxScrollExtent)) {
          scrollTicker.stop();
          scrollTicker.dispose();
          scrollTicker = null;
        } else {
          controller.jumpTo(controller.offset + offsetPerFrame);
        }
      });
      scrollTicker.start();
      return false;
    },onLeave: (data) {
      scrollTicker?.stop();
      scrollTicker?.dispose();
      scrollTicker = null;
    },);
}