go-flutter开发桌面应用(一)第一个桌面应用
正文
之前学了几天go语言,对于Java的深层怎么也钻研不进去的我,发现go语言的确是挺简单。
一直想用go语言做个小工具啥的,奈何对于使用跨平台的Qt也好,Windows独占的 lxn/walk也好,都学不太进去。
therecipe/qt
lxn/walk
后来接触了flutter,谷歌吹嘘着将来大有发展,实际开发中还是到处是坑。
然后又接触了go-flutter,一开始觉着有各种问题,也不方便调试,做了一个小例子就放弃了。
(炒了几天股被套)之后还是想用go语言做个小工具,于是决定再学习一下go-flutter,说不定越来越好了呢。
相关代码(履历为 初始提交 的版本)
安装Go
Go语言中文官网
从go1.11开始,go语言使用go modules模块进行依赖管理。
go1.11、go1.12需要要设置环境变量启用go modules。
GO111MODULE=auto复制代码
go1.13默认启用go modules,无需要设置。
另外,国内需要设置GOPROXY环境变量
GOPROXY=https://goproxy.cn复制代码
安装Flutter
参照Flutter中文网
能启动Flutter的默认示例即可。
开始go-flutter
参照链接:# 安装go flutter desktop
go-flutter的github仓库:go-flutter-desktop/go-flutter
1 安装TDM-GCC64位
tdm-gcc (jmeubank.github.io)
安装后子目录的bin需要添加到PATH中。
2 安装hover
go get -u -a github.com/go-flutter-desktop/hover复制代码
貌似是为了防止下载go官方包失败。
下载后进入到对应目录,运行命令生成可执行程序。
go install复制代码
文件默认安装到 $GOPATH$/bin下,需要把$GOPATH$/bin添加到环境变量中。
hover要求使用flutter channel beta的发行版本
3 flutter开启desktop支持
默认beta版本不支持desktop,需要手动开启:
在flutter目录执行以下命令
git checkout HEAD~0复制代码
执行开启desktop支持命令
flutter config --enable-windows-desktop复制代码
验证是否支持desktop,查看结果中是否有windows设备
flutter devices复制代码
确认结果(例):
3 connected devices: Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.18363.1082] Web Server (web) • web-server • web-javascript • Flutter Tools Chrome (web) • chrome • web-javascript • Google Chrome 85.0.4183.102复制代码
4 创建flutter项目,并使用go-flutter运行
创建Flutter项目
flutter create hellogoflutter复制代码
控制台日志:
Creating project hellogoflutter... hellogoflutter.gitignore (created) hellogoflutter.idea\libraries\Dart_SDK.xml (created) hellogoflutter.idea\libraries\KotlinJavaRuntime.xml (created) hellogoflutter.idea\modules.xml (created) hellogoflutter.idea\runConfigurations\main_dart.xml (created) hellogoflutter.idea\workspace.xml (created) hellogoflutter.metadata (created) hellogoflutter\android\app\build.gradle (created) hellogoflutter\android\app\src\main\kotlin\com\example\hellogoflutter\MainActivity.kt (created) hellogoflutter\android\build.gradle (created) hellogoflutter\android\hellogoflutter_android.iml (created) hellogoflutter\android.gitignore (created) hellogoflutter\android\app\src\debug\AndroidManifest.xml (created) hellogoflutter\android\app\src\main\AndroidManifest.xml (created) hellogoflutter\android\app\src\main\res\drawable\launch_background.xml (created) hellogoflutter\android\app\src\main\res\mipmap-hdpi\ic_launcher.png (created) hellogoflutter\android\app\src\main\res\mipmap-mdpi\ic_launcher.png (created) hellogoflutter\android\app\src\main\res\mipmap-xhdpi\ic_launcher.png (created) hellogoflutter\android\app\src\main\res\mipmap-xxhdpi\ic_launcher.png (created) hellogoflutter\android\app\src\main\res\mipmap-xxxhdpi\ic_launcher.png (created) hellogoflutter\android\app\src\main\res\values\styles.xml (created) hellogoflutter\android\app\src\profile\AndroidManifest.xml (created) hellogoflutter\android\gradle\wrapper\gradle-wrapper.properties (created) hellogoflutter\android\gradle.properties (created) hellogoflutter\android\settings.gradle (created) hellogoflutter\ios\Runner\AppDelegate.swift (created) hellogoflutter\ios\Runner\Runner-Bridging-Header.h (created) hellogoflutter\ios\Runner.xcodeproj\project.pbxproj (created) hellogoflutter\ios\Runner.xcodeproj\xcshareddata\xcschemes\Runner.xcscheme (created) hellogoflutter\ios.gitignore (created) hellogoflutter\ios\Flutter\AppFrameworkInfo.plist (created) hellogoflutter\ios\Flutter\Debug.xcconfig (created) hellogoflutter\ios\Flutter\Release.xcconfig (created) hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Contents.json (created) hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-1024x1024@1x.png (created) hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-20x20@1x.png (created) hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-20x20@2x.png (created) hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-20x20@3x.png (created) hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-29x29@1x.png (created) hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-29x29@2x.png (created) hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-29x29@3x.png (created) hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-40x40@1x.png (created) hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-40x40@2x.png (created) hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-40x40@3x.png (created) hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-60x60@2x.png (created) hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-60x60@3x.png (created) hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-76x76@1x.png (created) hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-76x76@2x.png (created) hellogoflutter\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-83.5x83.5@2x.png (created) hellogoflutter\ios\Runner\Assets.xcassets\LaunchImage.imageset\Contents.json (created) hellogoflutter\ios\Runner\Assets.xcassets\LaunchImage.imageset\LaunchImage.png (created) hellogoflutter\ios\Runner\Assets.xcassets\LaunchImage.imageset\LaunchImage@2x.png (created) hellogoflutter\ios\Runner\Assets.xcassets\LaunchImage.imageset\LaunchImage@3x.png (created) hellogoflutter\ios\Runner\Assets.xcassets\LaunchImage.imageset\README.md (created) hellogoflutter\ios\Runner\Base.lproj\LaunchScreen.storyboard (created) hellogoflutter\ios\Runner\Base.lproj\Main.storyboard (created) hellogoflutter\ios\Runner\Info.plist (created) hellogoflutter\ios\Runner.xcodeproj\project.xcworkspace\contents.xcworkspacedata (created) hellogoflutter\ios\Runner.xcodeproj\project.xcworkspace\xcshareddata\IDEWorkspaceChecks.plist (created) hellogoflutter\ios\Runner.xcodeproj\project.xcworkspace\xcshareddata\WorkspaceSettings.xcsettings (created) hellogoflutter\ios\Runner.xcworkspace\contents.xcworkspacedata (created) hellogoflutter\ios\Runner.xcworkspace\xcshareddata\IDEWorkspaceChecks.plist (created) hellogoflutter\ios\Runner.xcworkspace\xcshareddata\WorkspaceSettings.xcsettings (created) hellogoflutter\lib\main.dart (created) hellogoflutter\hellogoflutter.iml (created) hellogoflutter\pubspec.yaml (created) hellogoflutter\README.md (created) hellogoflutter\test\widget_test.dart (created) hellogoflutter\web\favicon.png (created) hellogoflutter\web\icons\Icon-192.png (created) hellogoflutter\web\icons\Icon-512.png (created) hellogoflutter\web\index.html (created) hellogoflutter\web\manifest.json (created) hellogoflutter\windows.gitignore (created) hellogoflutter\windows\CMakeLists.txt (created) hellogoflutter\windows\flutter.template_version (created) hellogoflutter\windows\flutter\CMakeLists.txt (created) hellogoflutter\windows\runner\CMakeLists.txt (created) hellogoflutter\windows\runner\flutter_window.cpp (created) hellogoflutter\windows\runner\flutter_window.h (created) hellogoflutter\windows\runner\main.cpp (created) hellogoflutter\windows\runner\resource.h (created) hellogoflutter\windows\runner\resources\app_icon.ico (created) hellogoflutter\windows\runner\runner.exe.manifest (created) hellogoflutter\windows\runner\Runner.rc (created) hellogoflutter\windows\runner\run_loop.cpp (created) hellogoflutter\windows\runner\run_loop.h (created) hellogoflutter\windows\runner\utils.cpp (created) hellogoflutter\windows\runner\utils.h (created) hellogoflutter\windows\runner\win32_window.cpp (created) hellogoflutter\windows\runner\win32_window.h (created) hellogoflutter\windows\runner\window_configuration.cpp (created) hellogoflutter\windows\runner\window_configuration.h (created) Running "flutter pub get" in hellogoflutter... 2.2s Wrote 96 files. All done! [√] Flutter: is fully installed. (Channel unknown, 1.20.3, on Microsoft Windows [Version 10.0.18363.1082], locale zh-CN) [√] Android toolchain - develop for Android devices: is fully installed. (Android SDK version 29.0.1) [√] Chrome - develop for the web: is fully installed. [X] Visual Studio - develop for Windows: is not installed. [√] Android Studio: is fully installed. (version 4.0) [√] VS Code: is fully installed. (version 1.49.1) [√] Connected device: is fully installed. (3 available) Run "flutter doctor" for information about installing additional components. In order to run your application, type: $ cd hellogoflutter $ flutter run Your application code is in hellogoflutter\lib\main.dart. WARNING: The Windows tooling and APIs are not yet stable. You will likely need to re-create the "windows" directory after future Flutter updates.复制代码
进入到目录使用hover初始化
cd hellogoflutter hover init复制代码
执行hover run
hover run复制代码
会提示找不到 lib/main_desktop.dart 文件,该文件是go-flutter的启动入口文件。
提示是否创建该文件,选择 y 自动创建后,会自动启动程序。
控制台日志
[1;36mhover: [0m[33mTarget file "lib/main_desktop.dart" not found.[0m [1;36mhover: [0m[33mLet hover add the "lib/main_desktop.dart" file? [0m [1;36mhover: [0m[y/N]? y [1;36mhover: [0m[32mTarget file "lib/main_desktop.dart" has been created.[0m [1;36mhover: [0m[32m Depending on your project, you might want to tweak it.[0m [1;36mhover: [0mUsing engine from cache [1;36mhover: [0mCleaning the build directory [1;36mhover: [0m[33m⚠ The go-flutter project tries to stay compatible with the beta channel of Flutter.[0m [1;36mhover: [0m[33m⚠ It's advised to use the beta channel: `[35mflutter channel beta[0m`[0m [1;36mhover: [0m[32mBundling flutter app[0m Font subetting is not supported in debug mode. The --tree-shake-icons flag will be ignored. hover: Compiling 'go-flutter' and plugins hellogoflutter/go/cmd hover: Successfully compiled hover: Build finished, starting app... hover: Running hellogoflutter in debug mode flutter: Observatory listening on http://127.0.0.1:50300/nHb55dLVDCs=/ go-flutter: calculated pixelRatio limited to a minimum of 1.0. metrics: {"dpi":93.6405529953917,"monitorWidthMm":434,"monitorWidthSc":1600,"mscpi":93.6405529953917,"pixelRatio":0.5852534562211982,"ppsc":1,"windowWidthPx":800,"windowWidthSc":800} Waiting for Flutter test device to report its views... 8ms Syncing files to device Flutter test device... 7,504ms (!) Flutter run key commands. r Hot reload. R Hot restart. h Repeat this help message. d Detach (terminate "flutter run" but leave application running). c Clear the screen q Quit (terminate the application on the device). An Observatory debugger and profiler on Flutter test device is available at: http://127.0.0.1:50300/nHb55dLVDCs=/复制代码
启动界面:
5 配置go flutter desktop的Debug环境
go flutter desktop模式是不支持与vscode集成debug的,不过可以通过修改配置让vscode支持。
在VSCode中打开工程,创建.vscode目录,在.vscode目录下创建tasks.json和launch.json。
tasks.json
{ "version": "2.0.0", "tasks": [ { "label": "hover build windows", "type": "shell", // windows平台 "command": "hover build windows --debug", "problemMatcher": [ "$go" ] } ] }复制代码
launch.json
{ "version": "0.2.0", "configurations": [ { "name": "Flutter Desktop App", "type": "dart", "request": "launch", "program": "lib/main_desktop.dart", // hellogoflutter.exe为编译出来的程序文件 "args": ["--use-application-binary", "go/build/outputs/windows/hellogoflutter.exe"], "preLaunchTask": "hover build windows" } ] }复制代码
点击执行,即可Debug。
6 Mac下的go-flutter desktop的配置
Mac下开启桌面支持
在flutter目录执行以下命令
git checkout HEAD~0复制代码
开启Mac桌面支持
可执行 flutter config -h 查看各平台对应的开启桌面支持的命令
flutter config --enable-macos-desktop复制代码
验证是否支持desktop,查看结果中是否有macOS设备
flutter devices复制代码
确认结果(例):
1 connected device: macOS (desktop) • macos • darwin-x64 • Mac OS X 10.13.6 17G10021复制代码
工程下创建一个macOS设备用于运行程序(create和.之间有个空格)
flutter create .复制代码
目录下自动生成了macos目录,对应macos设备。
重启后VSCode会默认加载macos设备。
7. 在Mac中用VSCode调试
7.1 编译生成DEBUG用可执行文件
sudo hover build darwin --debug复制代码
编译后的文件在工程下的下面的目录里,可执行程序为hellogoflutter,没有后缀名。
go/build/outputs/darwin/复制代码
双击可执行文件打开程序。
打开命令时,会有一个命令窗口和一个程序界面。
在命令窗口找到虚拟机服务对应的URI。
flutter: Observatory listening on http://127.0.0.1:64184/2PhQZHcArbU=/复制代码
7.2 在VSCode中绑定Flutter的调试进程
打开VSCode,快捷键 Command + Shift + P 打开命令模式,输入下面命令绑定调试进程。
Debug: Attach to Flutter Process复制代码
提示输入:
Paster an VM Service URI复制代码
输入上面命令窗口里的URI,回车,即可实现DEBUG监听:
http://127.0.0.1:64184/2PhQZHcArbU=/复制代码
VSCode的窗口会显示:
Connecting to VM Service at ws://127.0.0.1:64184/2PhQZHcArbU=/ws复制代码
此时可切换到程序界面交互,进行DEBUG。
特别感谢下面帖子的作者:
头条 Flutter 混合工程实践 (qq.com)
7.3 root权限运行VSCode
root权限调试go-flutter程序可实现热加载。
打开VSCode,快捷键shift + command + p,在命令列表中找到下面命令安装VSCode到MacOS的PATH。
Shell Command: Install 'code' Command in PATH复制代码
然后命令行用sudo启动VSCode,如果无法进入管理者模式,则需要结束掉所有VSCode进程再用命令启动。
sudo code
作者:bettersun
链接:https://juejin.cn/post/7019643221366013965