Flutter入门教程(三)教你如何实现VSCode高效开发

[删除(380066935@qq.com或微信通知)]

更好的阅读体验请查看原文:https://www.cnblogs.com/libo-web/p/16065059.html

一、前言

在上一篇文章中,介绍了Flutter的开发环境搭建流程,创建并运行成功一个flutter项目,用户界面呈现也通过Android虚拟机实现在线查看效果。

但是对于一个前端来说,用 VS Code 编辑器的同学肯定很多,第一次接触Flutter开发对于Android Studio 编辑器可能不太熟悉,有些同学可能就会想可不可以使用VSCode来开发,这里我想说完全可以的。甚至用VSCode开发比Android Studio性能更高:


从任务管理器查看进程可以看出,我们使用VSCode占用内存明显比Android Studio少,所以VSCode也是一个不错的选择,下面就来为大家讲解如何使用VSCode编写我们的Flutter代码,并且也能通过虚拟机查看实时效果!

二、安装插件

 VSCode下载地址:https://code.visualstudio.com

下载好VSCode编辑器后,打开主界面,在应用商店中搜索flutter点击安装:

flutter插件安装成功后应该会自动安装dart插件,如果没有自动安装的同学,可以自己动手搜索并安装,安装成功我们重启VSCode

导入我们事先创建好的flutter项目,我们可以看到左侧会多了一个flutter的logo图标:

这可以让我们的项目代码结构一目了然,是不是很nice

三、配置虚拟机

通过VSCode编写flutter,我们不可能打开Android Studio编辑器查看效果吧,这显然是不科学的,这我还不如直接在Android Studio中编写呢,所以在这里我们需要创建一个bat命令,执行批处理文件来唤起我们的模拟器。

🔸首先在桌面新建一个名为 EmulatorRun.bat 文件(当然你也可以任意位置创建,在桌面只是方面启动)

🔸编辑此文件输入:

D:\Android\android-sdk-windows\emulator\emulator.exe -netdelay none -netspeed full -avd <EmulatorName>
  •  D:\Android\android-sdk-windows\emulator\emulator.exe 表示你的emulator所在位置,一般在Android SDK目录下的emulator文件夹里
  •  -netdelay none -netspeed full 表示配置命令,前者表示网络延时设置为0,后者表示速度
  •  -avd <EmulatorName> 表示开启哪个虚拟机,将<EmulatorName>替换成你的虚拟机名字(多个单词之间用_连接)

🔸双击启动 EmulatorRun.bat

 这时我们的虚拟机就已经启动了

四、运行flutter

在VSCode中打开Terminal(终端),输入 flutter run 命令即可运行项目:

在这运行我们是能运行成功的,但是当我们修改dart内容时,界面不会发生实时更新,也就是我们所说的热更新。这里我们需要在终端中按下 r 键,界面就会更新啦。

细心的同学其实已经发现了,在我们运行flutter项目后,终端会有提示,不止只有r一个快捷键:

  • h:查看所有可用的交互命令
  • d:终止flutter运行,但保持应用程序运行
  • c:清屏
  • q:退出,终止设备上应用程序

输入h查看所有可用命令:

 这里再举两个实用的:

◾ p:显示网格构造线,这在开发过程中是非常实用的

◾ o:切换android和ios端

可以看到在ios端,appBar是居中的

 

虽然我们可以通过r键实现更新界面,但还是称不上热更新,怎样才能修改代码后保存及时更新呢?这里我们就需要使用VSCode的debug模式:

这时我们只需要修改代码后保存自动就可以更新界面,就实现了热更新功能~~

posted @ 2022-03-27 22:55  不知名前端李小白