You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何实现可横向滚动ListView+仅支持垂直拖拽的子项?

桌面端Flutter横向画廊手势冲突问题

我正在开发一款桌面端Flutter应用,需实现可横向滚动的元素画廊(元素可能超出视图范围)。要求画廊内元素仅支持垂直拖拽以放置到其他位置,但当前元素可任意方向拖拽。期望横向拖拽时手势传递给父ListView实现滚动,垂直拖拽时可拖动元素。当前代码中GestureDetector的onHorizontalDragStart(或onHorizontalDragUpdate)未触发,尝试嵌套GestureDetector也无效。

相关代码如下:

class PictGalleryView extends StatelessWidget {
  PictGalleryView({
    Key? key,
    required this.size,
  }) : super(key: key);

  final Size size;
  final projectSettings = GetIt.I<ProjectSettings>();
  ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    
    return SizedBox(
      height: size.height,
      width: size.width,
      child: ScrollConfiguration(
        behavior: ScrollConfiguration.of(context).copyWith(
          dragDevices: {
            PointerDeviceKind.touch,
            PointerDeviceKind.mouse,
          },
        ),
        child: ListView.builder(
          controller: _scrollController,
          scrollDirection: Axis.horizontal,
          shrinkWrap: true,
          itemCount: projectSettings.numPictElements,
          physics: const AlwaysScrollableScrollPhysics(),
          itemBuilder: (BuildContext context, int index) {
            return Padding(
              padding: const EdgeInsets.all(5),
              child: Center(
                child: GestureDetector(
                  onHorizontalDragStart: (details) {
                    dev.log('onHorizontalDragStart');
                    // this doesn't happen?
                  },
                  child: PictElementDisplay(
                    //this shouldn't be horizontally draggable but it is!
                    element: projectSettings.pictElementDataList[index],
                    size: Size(75, 60),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}
//...
class PictElementDisplay extends StatelessWidget {
  PictElementDisplay({
    Key? key,
    required this.element,
    required this.size,
  }) : super(key: key);
  final PictElementData element;
  final Size size;

  @override
  Widget build(BuildContext context) {
    return SizedBox.fromSize(
      child: Draggable(
        data: element,
        feedback: Container(
          height: size.height,
          width: size.width,
          decoration: const BoxDecoration(
            color: Colors.green, //todo
          ),
          child: Text('id: ${element.id.toString()}'),
        ),
        child: Container(
          height: size.height,
          width: size.width,
          decoration: const BoxDecoration(
            color: Colors.red, //todo
          ),
          child: Text('id: ${element.id.toString()}'),
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange,提问作者Andre Clements

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.01 19:02:11