Flutter 中运行函数后继续滚动事件

Question

我有一个按钮，当鼠标悬停在其上时会打开叠加层。当我在按钮上滚动鼠标时，我想关闭叠加层并像平常一样滚动页面。

我正在监听按钮内的滚动事件，其中

Listener

表示

onPointerSignal

，如下所示：

Listener(
  onPointerSignal: (PointerSignalEvent event) {
    if (event is PointerScrollEvent) {
      setState(() {
        volumeSliderExpanded = false;
     });

    // continue the scroll event here somehow?
   }
}

目前，用户需要“勾选”鼠标滚轮一次才能关闭叠加层，之后由于volumeSlider将不再展开，因此将继续正常滚动。 我想在覆盖层关闭后的第一个滚动刻度上开始滚动页面。

这可能吗，还是我的做法是错误的？

Answer 1

您似乎希望用户将鼠标悬停在按钮上时开始滚动，然后在关闭叠加层后能够正常导航。这可以通过使用标志和 ScrollController 的组合来控制滚动行为来完成。这里提供了如何执行此操作的完整说明：

1. 初始化一个ScrollController和一个布尔标志来跟踪覆盖层是否打开。

    ScrollController _controller = ScrollController();
    bool overlayOpen = false;
   

2. 用监听器包装按钮并处理此处提到的指针事件。

    Listener(
           onPointerSignal: (PointerSignalEvent event) {
             if (event is PointerScrollEvent) {
               setState(() {
                 // Close the overlay
                 overlayOpen = false;
               });              
              // Continue the scroll event on the page
              _controller.position.animateTo(
                _controller.offset + event.scrollDelta.dy,
                duration: Duration(milliseconds: 300),
                curve: Curves.easeInOut,
              );
            }
          },
          child: YourButtonWidget(), // Replace with your button widget
        ),
   

3. 根据overlayOpen标志修改覆盖渲染逻辑。

    if (overlayOpen) {
       // Place your overlay content here
    } else {
       // Place the button or page content here
    }
   

4. 当您想要打开叠加层时（例如，在按钮悬停时），请将overlayOpen 设置为true。

    setState(() {
      overlayOpen = true;
    });
   

使用此配置，一旦用户将鼠标悬停在按钮上后开始滚动，覆盖层就会关闭，并且页面将按预期滚动。使用overlayOpen选项，您可以配置覆盖层的行为方式，同时使用ScrollController来保持滚动页面。