Flutter 开发配置

静默的小猫
890 阅读2分钟

mac android

1. 快捷键

1. 快速创建Widget：在dart文件中输入stf或stl出现提示后按回车即可  
2. 快速修复：command + .  
3. 自动生成构造函数：选中 final 参数，快捷键：option + 回车  
4. 添加父组件、变为子组件、删除子组件：option+回车  
5. 万能的搜索：双击shift  
6. 查看最近打开的文件：command + E  
7. 重命名：fn+shift+f6  
8. 查看当前类结构：command + fn + f12  
9. 查看源码：将光标放到要查看源码的类名或方法名上，长按command 然后的点击  
10. 查看类的子类：选中要查看的类，然后：command + B 或 option + command + B  
11. 将代码更新到模拟器上：选中模拟器然后 command + R  
12. 导入类的快捷键：将光标放在要导入类的上面，然后按 option + enter  
13. 前进后退：当跟踪代码的时候，经常跳转到其他类，后退快捷键：option+command+方向左键，前进快捷键：option+command+方向右键  
14. 全局搜索：command + shift + F  
15. 全局替换：command + shift + R  
16. 查找引用： option + shift + F7

2. 自动补全插件

Flutter Snippets

image.png

有了这个插件后, Android Studio可以帮你自动补全主流widget的代码。以下是触发自动补全各种 widget的缩写:

  • column :创建Column Widget
  • container :创建Container Widget
  • row :创建Row Widget
  • showDialog :创建AlertDialog 更多自动补全快捷方式 flutter-snippets

3.代码自动格式化

虽然我们可以通过快捷键option(alt)+command(ctrl)+L来在提交代码是格式化,但是这种手动的方式显然不够效率。下面我们来借助AS的保存时代码自动格式化功能来释放我们的双手:在Settings > Language & Frameworks > Flutter 中选上"Format Code on Save"这个选项:

image.png

另外建议勾选Organize imports on save 这个选项,它会帮你移除没有使用的导入。

4.提取flutter代码

Flutter最让人头疼的一-点是的布局的嵌套,对于复杂的布局如果不进行任何重构的情况下会嵌套的非常深,从而降低代码的可读性不利于后期的维护。推荐的做法是将复杂的布局提取成一个函数或者-个组件,那么接下来给大家分享一个提取Flutter代码的技巧 :

  • 选中一个比较复杂的widget ,鼠标右键进入Refactor > Extract Method ,然后给这个方法取一个名字，AS可以自动把这块代码抽离出一个Method并为它添加对于对于的参数;
  • 除此之外,我们还可以借助AS来将符合条件的代码块提取成一个Widget ,只需要在Refactor中选择Extract Flutter Widget即可。
avatar
文章
阅读
粉丝