如何实现可横向滚动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
相关产品推荐
相关产品推荐

