egret-docs-master/Wing/ui/README.md

70 lines
3.2 KiB
Markdown
Raw Permalink Normal View History

2024-06-19 13:32:32 +08:00
![image](1.png)
### 基本布局
Wing有着简单直观的布局为代码编辑区保留了最大化的空间同时也保留了足够的空间来浏览项目中的文件。Wing的UI主要分为下面的几大块
1. 编辑器:编辑代码的主要区域,你能够并排打开三个编辑器进行开发。
2. 项目列表:显示正在编辑的文件或文件夹额外的信息。
3. 底边栏:包含输出,控制台等等常用的面板。
4. 侧边栏包含文件搜索Git和调试等功能面板。
每次打开Wing的时候它会自动还原到你上次关闭它的状态包括打开的文件夹各个面板的布局以及上次打开的文件。
![image](2.png)
> 可以点击上图红框中的三个按钮,显示/隐藏界面。
### 多编辑器编辑
你可以同时打开3个并排显示的编辑器。
如果你有一个正在显示的编辑器,有几种方式来打开一个并排显示的编辑器。
- 在文件列表中,按住`Ctrl`(Mac:`Cmd`)点击一个文件
- 在文件列表中,右击一个文件,点击“在侧边编辑器打开”
- 按快捷键 `Ctrl+\` 在新编辑器中打开正在编辑的文档
注意,不论你合适打开一个文件,当前活动的编辑器总是会显示新打开的文件的内容,所以,当你想要在特定的编辑器中打开文件时,请先点击一下它,来激活这个编辑器。
当你同时打开了多个编辑器窗口的时候,你可以通过按 `Ctrl/Cmd` + `1`,`2`或`3`来切换到您需要的编辑器。
> 你可以通过拖动编辑器的标题栏,来重新排列几个编辑器的顺序,通过编辑器间的分隔线来调整每个编辑器的大小
### 文件管理器
“文件”面板可以用来浏览、打开、管理项目中的文件和文件夹。
当你在Wing中打开了一个文件夹的时候该文件夹中所有的内容会显示在“文件”面板中。在这里你能进行各种文件操作
- 创建、删除文件或文件夹,或者重命名。
- 通过拖动来移动文件或文件夹
- 你可以使用右键菜单来查看所有的操作
> 你可以直接从文件系统拖动文件到文件面板来复制到当前目录,之后上方会有提示信息
![](3.png)
![](4.png)
### 命令面板
命令面板能方便的查找和执行命令,使用快捷键 **F1** 或者 **Ctrl+Shift+P** 呼出面板。
![](5.png)
面板每一项都是一个命令,如果该命令有快捷键在右侧会显示对应的快捷键。
### 调试控制台
如果配置了 `launch.json` 可以通过快捷键F5 或者 调试面板启动调试。在调试模式下,调试选项卡中的**变量,监视,调用堆栈,断点**折叠菜单都是可用的。
![](6.png)
面板中的调试面板中显示程序运行中的输出和报错信息在下方的输入框中也能输入表达式并动态执行得到计算结果。这个面板与Chrome开发者工具中的Console面板功能类似。
### 输出面板
输出面板显示一些提示消息,显示当前运行状态。输出面板有多个频道(`Channel`)区分不同输出的来源。
例如Tasks频道会输出项目编译过程中相关的信息GIT频道输出Git执行过程中的信息Project频道输出项目创建相关的信息等。
![](7.png)