使用overlapping_panels 0.0.3时横向ListView.builder无法滚动求助

问题现象 #

使用overlapping_panels 0.0.3时，设置scrollDirection: Axis.horizontal的ListView.builder无法横向滚动，仅能显示屏幕可见区域的列表项；但设置为纵向滚动时功能正常。需求是列表完全滚动至边界后，再触发面板的切换滑动。

问题根源 #

overlapping_panels的面板切换手势与横向ListView的滚动手势存在优先级冲突——组件会优先响应横向拖动来切换面板，导致ListView的滚动事件被拦截，无法触发。

解决代码 #

通过GestureDetector拦截横向拖动事件，结合ScrollController判断ListView的滚动状态，实现“先滚动列表，到边界再切换面板”的逻辑：

body: OverlappingPanels(
  right: Builder(
    builder: (context) => const Text("right"),
  ),
  main: Builder(
    builder: (context) {
      final items = ["item1","Item2", "Item3", "Item4", "Item5", "Item6", "Item7"];
      final scrollController = ScrollController();

      return Container(
        width: double.infinity,
        height: 200,
        color: Colors.blue,
        child: GestureDetector(
          onHorizontalDragUpdate: (details) {
            final isAtStart = scrollController.offset <= 0;
            final isAtEnd = scrollController.offset >= scrollController.position.maxScrollExtent;

            // 列表未到边界时，处理自身滚动
            if ((details.delta.dx > 0 && !isAtStart) || (details.delta.dx < 0 && !isAtEnd)) {
              scrollController.jumpTo(scrollController.offset - details.delta.dx);
            } else {
              // 列表到边界后，交给面板处理切换
              OverlappingPanels.of(context).onDragUpdate(details);
            }
          },
          child: Scrollbar(
            child: ListView.builder(
              controller: scrollController,
              scrollDirection: Axis.horizontal,
              itemCount: items.length,
              itemBuilder: (context, index) {
                return Container(
                  width: 150,
                  margin: const EdgeInsets.all(8),
                  child: Center(
                    child: Text(
                      items[index],
                      style: const TextStyle(color: Colors.black, fontSize: 18),
                    ),
                  ),
                );
              },
            ),
          ),
        ),
      );
    },
  ),
  onSideChange: (side) {
    setState(() {
      if (side == RevealSide.main) {
        // 隐藏内容逻辑
      } else if (side == RevealSide.left) {
        // 显示内容逻辑
      }
    });
  },
)

关键说明 #

• ScrollController：用于实时获取ListView的滚动位置，判断是否到达滚动边界；
• GestureDetector：拦截横向拖动事件，根据滚动状态决定是让ListView滚动还是触发面板切换；
• 手动控制滚动：通过jumpTo方法实现ListView的滚动，避免手势被面板组件拦截。

内容的提问来源于stack exchange，提问作者Machhindra Neupane