file_drag_and_drop一个Flutter桌面版拖动

前言

我的上一篇文章手把手教你实战Flutter 桌面版-Tinypng(熊猫图片压缩)GUI工具基于Flutter Deskstop 实现初版的图片压缩功能，可以支持macOS、以及windows。但是美中不足的是，macOS下依然要点击选择文件去压缩，而不是像Finder一样随意拖动文件。在文末我也是立了Flag要支持，经过一周时间的调研，顺利实现并且开源了此插件file_drag_and_drop。目前仅支持macOS，由于此功能非常依赖原生桌面，我对Windows Visual Studio编程是在是不熟，Flutter接口已经写好，期待有缘人可以贡献。话不多说，基于此插件，我也对我的图片压缩工具macOS版本做了版本更新，效果如下。

c126edd73491463a81c8fa8c941c94e4~tplv-k3u1fbpfcp-watermark.image.gif

插件实现的代码过程解析

第一步等待初始化window

由于macOS桌面不像iOS原生可以使用PlatforView. 实际拖动接受文件和iOS差不多，要实现NSView的一个drag协议。 这里用了个取巧的方法，先在flutter端main函数 await一个 initializedMainView初始化方法。我们直接盖一个drop view到 NSWindow上即可。由于用户可能放大缩小窗口，布局就不用frame了，直接用原生约束，也不要SnapKit了，还要导入库，很简单的约束而已。

Flutter代码

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await dragAndDropChannel.initializedMainView();
  runApp(GetMaterialApp(
    navigatorKey: Get.key,
    home: OKToast(
      child: MyApp(),
    ),
  ));
}

macOS 原生 Swift代码

private var mainWindow: NSWindow {
        get {
            return (self.registrar.view?.window)!;
        }
    }

private var mainView: NSView {
        get {
            return self.registrar.view!
        }
    }
    
private func _initializedMainView() {
        if (!_initialized) {
            _initialized = true
            mainView.addSubview(mainDropView)
            mainDropView.frame = mainView.bounds
            mainDropView.translatesAutoresizingMaskIntoConstraints = false
            mainView.addConstraints(
                [
                    NSLayoutConstraint(item: mainDropView, attribute: .leading, relatedBy: .equal, toItem: mainView, attribute: .leading, multiplier: 1, constant: 0),
                    NSLayoutConstraint(item: mainDropView, attribute: .trailing, relatedBy: .equal, toItem: mainView, attribute: .trailing, multiplier: 1, constant: 0),
                    NSLayoutConstraint(item: mainDropView, attribute: .top, relatedBy: .equal, toItem: mainView, attribute: .top, multiplier: 1, constant: 0),
                    NSLayoutConstraint(item: mainDropView, attribute: .bottom, relatedBy: .equal, toItem: mainView, attribute: .bottom, multiplier: 1, constant: 0)
              ]
            )
        }
    }

第二步实现协议

Swift

protocol FlutterDragContainerDelegate {
    func draggingFileEntered()
    func draggingFileExit()
    func prepareForDragFileOperation()
    func performDragFileOperation(_ results : [FileResult])
}

Flutter 添加监听

abstract class DragContainerListener {
    void draggingFileEntered() {}
    void draggingFileExit() {}
    void prepareForDragFileOperation() {}
    void performDragFileOperation(List<DragFileResult> fileResults) {}
}
   

原生几个重要协议方法，通过Channel 转为Flutter的监听

Swift

override func draggingEntered(_ sender: NSDraggingInfo) -> NSDragOperation {
        if let delegate = self.delegate {
            delegate.draggingFileEntered();
        }
        return NSDragOperation.generic
    }
    
    override func draggingExited(_ sender: NSDraggingInfo?) {
        if let delegate = self.delegate {
            delegate.draggingFileExit();
        }
    }
    
    override func prepareForDragOperation(_ sender: NSDraggingInfo) -> Bool {
        if self.delegate != nil {
            self.delegate?.prepareForDragFileOperation()
        }
        return true
    }
    
    override func performDragOperation(_ sender: NSDraggingInfo) -> Bool {
        var files = Array<FileResult>()
        if let board = sender.draggingPasteboard.propertyList(forType: NSFilenamesPboardType) as? NSArray {
            for path in board {
                print(path)
                if let p = path as? String {
                    let isDirectory = FlutterFileUtil.isDirectory(p)
                    let fileExtension = FlutterFileUtil.fileExtension(p)
                    files.append((path: p,isDirectory: isDirectory, fileExtension: fileExtension))
                }
            }
        }
        if self.delegate != nil {
            self.delegate?.performDragFileOperation(files)
        }
        return true
    }

Flutter端

ObserverList<DragContainerListener>? _listeners =
      ObserverList<DragContainerListener>();

  Future<void> _methodCallHandler(MethodCall call) async {
    if (_listeners == null) return;

    for (final DragContainerListener listener in listeners) {
      if (!_listeners!.contains(listener)) {
        return;
      }

      if (call.method != 'onEvent') throw UnimplementedError();

      String eventName = call.arguments['eventName'];
      Map<String, Function> funcMap = {
        kFileDragAndDropEventEntered: listener.draggingFileEntered,
        kFileDragAndDropEventExit: listener.draggingFileExit,
        kFileDragAndDropEventPrepareDragTask:
            listener.prepareForDragFileOperation,
        kFileDragAndDropEventPerformDragTask: listener.performDragFileOperation,
      };
      if (eventName == kFileDragAndDropEventPerformDragTask) {
        List fileResult = call.arguments['fileResult'];
        var resultList = <DragFileResult>[];
        fileResult.forEach((element) { 
          var result = DragFileResult.fromJson(element);
          resultList.add(result);
        });
        funcMap[eventName]!(resultList);
      } else {
        funcMap[eventName]!();
      }
    }
  }

第三步Window Home Page添加监听及处理

@override
  void initState() {
    super.initState();
    dragAndDropChannel.addListener(this);
  }

  @override
  void dispose() {
    dragAndDropChannel.removeListener(this);
    super.dispose();
  }

flutter监听的处理（相当于触发了原生的协议），这里简单做了个遮罩，拖进去显示，退出隐藏。

[图片上传失败...(image-b3e241-1659196308997)]

@override
  void draggingFileEntered() {
    print("flutter: draggingFileEntered");
    setState(() {
      visibilityTips = true;
    });
  }

  @override
  void draggingFileExit() {
    print("flutter: draggingFileExit");
    setState(() {
      visibilityTips = false;
    });
  }

  @override
  void prepareForDragFileOperation() {
    print("flutter: prepareForDragFileOperation");
    setState(() {
      visibilityTips = false;
    });
  }

  @override
  void performDragFileOperation(List<DragFileResult> fileResults) {
    print("flutter: performDragFileOperation");
    checkCanPicker().then((canPicker) {
      if (canPicker) {
        var collectionFiles = <File>[];
        fileResults.forEach((element) {
          if (element.isDirectory == false) {
            collectionFiles.add(File(element.path));
          }
          //TODO Also can collect the image file in Directory
        });
        var chooseFiles = chooseImageFiles(collectionFiles);
        if (chooseFiles.isNotEmpty) {
          controller.refreshWithFileList(chooseFiles);
        }
      }
    });
  }

源码地址

• 插件地址_file_drag_and_drop
• 此款图片压缩工具源码地址内有安装包可以下载

未来研究

此次插件仅实现了macOS从外部拖文件到应用内部，如何从应用内部拖文件去其他地方？由于deskstop版不支持Platform View。这感觉像是变成了一个死循环，还有待研究。另外写作不易，每次写作都耗费了不少时间，如果此文对你有帮助，希望点赞三连，Github也是Star顶起来，感谢🙏。