前言
我的上一篇文章手把手教你實戰(zhàn)Flutter 桌面版-Tinypng(熊貓圖片壓縮)GUI工具基于Flutter Deskstop 實現(xiàn)初版的圖片壓縮功能是尔，可以支持macOS合愈、以及windows。但是美中不足的是栖榨，macOS下依然要點擊選擇文件去壓縮，而不是像Finder一樣隨意拖動文件闸天。在文末我也是立了Flag要支持侥钳，經(jīng)過一周時間的調(diào)研呈枉，順利實現(xiàn)并且開源了此插件file_drag_and_drop刹勃。目前僅支持macOS堪侯，由于此功能非常依賴原生桌面，我對Windows Visual Studio編程是在是不熟荔仁，F(xiàn)lutter接口已經(jīng)寫好伍宦，期待有緣人可以貢獻。話不多說乏梁，基于此插件雹拄，我也對我的圖片壓縮工具macOS版本做了版本更新，效果如下掌呜。
c126edd73491463a81c8fa8c941c94e4~tplv-k3u1fbpfcp-watermark.image.gif
插件實現(xiàn)的代碼過程解析
第一步等待初始化window
由于macOS桌面不像iOS原生可以使用PlatforView. 實際拖動接受文件和iOS差不多，要實現(xiàn)NSView的一個drag協(xié)議坪哄。 這里用了個取巧的方法质蕉，先在flutter端main函數(shù) await一個 initializedMainView初始化方法。我們直接蓋一個drop view到 NSWindow上即可翩肌。由于用戶可能放大縮小窗口模暗，布局就不用frame了，直接用原生約束念祭，也不要SnapKit了兑宇，還要導(dǎo)入庫，很簡單的約束而已粱坤。
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)
]
)
}
}
第二步實現(xiàn)協(xié)議
Swift
protocol FlutterDragContainerDelegate {
func draggingFileEntered()
func draggingFileExit()
func prepareForDragFileOperation()
func performDragFileOperation(_ results : [FileResult])
}
Flutter 添加監(jiān)聽
abstract class DragContainerListener {
void draggingFileEntered() {}
void draggingFileExit() {}
void prepareForDragFileOperation() {}
void performDragFileOperation(List<DragFileResult> fileResults) {}
}
原生幾個重要協(xié)議方法隶糕，通過Channel 轉(zhuǎn)為Flutter的監(jiān)聽
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添加監(jiān)聽及處理
@override
void initState() {
super.initState();
dragAndDropChannel.addListener(this);
}
@override
void dispose() {
dragAndDropChannel.removeListener(this);
super.dispose();
}
flutter監(jiān)聽的處理（相當(dāng)于觸發(fā)了原生的協(xié)議），這里簡單做了個遮罩站玄，拖進去顯示枚驻，退出隱藏。
[圖片上傳失敗...(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);
}
}
});
}
源碼地址
未來研究
此次插件僅實現(xiàn)了macOS從外部拖文件到應(yīng)用內(nèi)部株旷，如何從應(yīng)用內(nèi)部拖文件去其他地方再登？由于deskstop版不支持Platform View。這感覺像是變成了一個死循環(huán)，還有待研究锉矢。另外寫作不易梯嗽，每次寫作都耗費了不少時間，如果此文對你有幫助沽损，希望點贊三連灯节，Github也是Star頂起來，感謝??缠俺。
