[Flutter翻译]Flutter Linux插件开发设置

我心飞翔 分类:javascript

原文地址:medium.com/flutter-com…

原文作者:medium.com/@RafalWacho…

发布时间:2021年4月16日 - 4分钟阅读

image.png

由于Flutter对Linux桌面的支持,我们现在可以期待这个伟大的平台有更多漂亮的应用。然而,当你想写一个自定义插件来扩展你的应用程序的功能时,你需要写一些C代码。我没有在任何地方找到关于如何做到这一点的说明,所以这里是如何设置Visual Studio Code来开发和调试Linux的Flutter插件。

在你开始之前

我希望你已经安装了Linux构建工具和VS Code,但如果没有,这里有两个链接介绍如何做到这一点。

flutter.dev/desktop#add…

code.visualstudio.com/

从模板中创建你的插件

首先,你需要创建你的项目。假设你的PATH变量里有Flutter,调用这个命令。

flutter create - org com.example - platforms=linux myapp
 

其中myapp是插件的名称。(你也可以在逗号后添加更多的平台)。

先编译项目

在Linux上,Flutter在编译embedder代码时使用了CMake的工具,并与我们的应用一起启动GTK窗口。要调试本地代码,首先,你需要运行一个flutter项目。它会制作一个工具来为cmake项目创建必要的符号链接。在myapp/example里面,运行我们最喜欢的命令。

flutter run
 

之后,退出应用。

打开主项目

现在打开VS Code里面我们新创建的插件的根目录( myapp/ ),接下来安装微软C++插件--marketplace.visualstudio.com/items?itemN… 。你会被要求加入该插件的Insider频道,如果你想让新功能更快落地,可以加入。

image.png

CMake集成

image.png

Flutter使用Clang编译器,所以选择Clang。

你还会被问到是否要为项目集成CMake,选择Yes,接下来点击Locate Cmake文件。

image.png

选择 "Locate",然后导航到该文件。

你会被问到CMakeList.txt文件的位置,并让你选择里面的那个。

myapp/example/linux/CMakeLists.txt

不要选择myapp/Linux里面的,否则IntelliSense将无法工作。

image.png

CMakeLists.txt的位置

现在重新启动与代码。

这时,代码完成应该可以了。

设置调试

用打印语句进行调试并不是分析代码的最好方法,所以我们要配置一个合适的调试器。

image.png

设置文件的位置

在根目录( myapp/ )中创建子文件夹.vscode(注意点),并在里面创建一个名为c_cpp_properties.json的文件--这是vscode的C++插件读取配置的地方。

{
  "configurations": [
    {
      "name": "Linux",
      "includePath": [
        "${workspaceFolder}/**"
      ],
      "defines": [],
      "compilerPath": "/usr/bin/clang",
      "cStandard": "c17",
      "cppStandard": "c++14",
      "intelliSenseMode": "linux-clang-x64",
      "compileCommands": "${workspaceFolder}/build/compile_commands.json",
      "configurationProvider": "ms-vscode.cmake-tools"
    }
  ],
  "version": 4
}
 

你还需要一个用于 cmake 配置的 settings.json 文件。

{
  "cmake.sourceDirectory": "${workspaceFolder}/example/linux",
  "cmake.configureOnOpen": true,
  "files.associations": {
    "cstring": "cpp"
  }
}
 

最后,创建launch.json,里面有两个发射配置。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Flutter",
      "cwd": "example",
      "request": "launch",
      "type": "dart"
    },
    {
      "name": "Debug native",
      "type": "cppdbg",
      "request": "launch",
      "program": "${workspaceFolder}/example/build/linux/x64/debug/bundle/myapp_example",
      "cwd": "${workspaceFolder}"
    }
  ]
}
 

你需要调整我们由flutter run命令创建的可执行文件的名称。看一下JSON的这部分。

{
  "program": "${workspaceFolder}/example/build/linux/x64/debug/bundle/myapp_example"
}
 

我们的可执行文件的名字是myapp_example。如果你用不同的名字创建了一个项目,它可能会有所不同。如果你运行的是不同版本的Flutter,那么路径可能略有不同。您可以通过简单地运行它来检查是否是正确的二进制。

运行代码

我们创建了两个启动配置,一个是用飞镖运行flutter,就像平常一样,第二个是用C++调试器运行创建的二进制。
这种方法的一个注意事项是,如果你改变了飞镖代码中的一些东西,你将不得不重新运行flutter运行。

image.png

大功告成!

它是完美的吗?不是,但它比打印变量到控制台更好吗?是的。

闭幕

希望你觉得这很有用,也希望我很快能在Linux上看到更多的Flutter插件。

编码快乐!


通过www.DeepL.com/Translator(免费版)翻译

回复

我来回复
  • 暂无回复内容