LayaAir 快捷键设置与资源命名规则

迷南。 2022-04-02 04:12 934阅读 0赞

**目录**

自定义快捷键

资源命名规则

基础组件命名规则

特殊组件

容器组件

--------------------

# 自定义快捷键 #

1、LayaAirIDE 中代码快捷键继承了 VS Code 的功能(个别快捷键会有所不同)，这对于如 Java 出身的用户显然用着会不太顺手，特别是常用的如注释、删除代码行，快速格式化代码等快捷键，希望它能尽量和《[IDEA\_WebStorm 常用快捷键][IDEA_WebStorm]》保持一致。

2、LayaAir 支持用户根据喜好来进行设置快捷键，本文使用的是 LayaAir IDE 2.0.0beta5 版本。

![20181225114308908.gif][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70][]

以修改 "删除行" 快捷键为例，可以在顶部进行搜索，然后找到之后进行双击，之后输入新快捷键即可。

# 资源命名规则 #

1、代码模式下在项目 laya/assets 目录下的资源都会在编辑模式资源列表中显示

2、资源管理器中的资源在场景编辑器中都会识别为组件使用，而识别组件类型的默认方式就是资源的命名前缀。比如命名为 btn\_xxx 会被识别为按钮，命名为 tab\_xxx 的会被识别为Tab组件。

3、对于资源命名的详细规则开发者必须熟练记忆掌握。

![20181225152212561.gif][]

## 基础组件命名规则 ##

LayaAir IDE 基础组件默认的资源命名规则：

<table> 
 <thead> 
  <tr> 
   <th><span style="color:#f33b45;">基础组件名称</span></th> 
   <th style="width:224px;">组件中文名称</th> 
   <th style="width:285px;">资源前缀（全写，不区分大小写）</th> 
   <th style="width:214px;">资源前缀(缩写，区分大小写)</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Label</td> 
   <td style="width:224px;">文本框</td> 
   <td style="width:285px;">label_</td> 
   <td style="width:214px;">—</td> 
  </tr> 
  <tr> 
   <td>TextInput</td> 
   <td style="width:224px;">输入框</td> 
   <td style="width:285px;">textinput_</td> 
   <td style="width:214px;">input_</td> 
  </tr> 
  <tr> 
   <td>TextArea</td> 
   <td style="width:224px;">带滚动条的文本域</td> 
   <td style="width:285px;">textarea_</td> 
   <td style="width:214px;">area_</td> 
  </tr> 
  <tr> 
   <td>Button</td> 
   <td style="width:224px;">按钮</td> 
   <td style="width:285px;">button_</td> 
   <td style="width:214px;">btn_</td> 
  </tr> 
  <tr> 
   <td>CheckBox</td> 
   <td style="width:224px;">多选框</td> 
   <td style="width:285px;">checkbox_</td> 
   <td style="width:214px;">check_</td> 
  </tr> 
  <tr> 
   <td>Radio</td> 
   <td style="width:224px;">单选框</td> 
   <td style="width:285px;">radio_</td> 
   <td style="width:214px;">—</td> 
  </tr> 
  <tr> 
   <td>Tab</td> 
   <td style="width:224px;">标签</td> 
   <td style="width:285px;">tab_</td> 
   <td style="width:214px;">—</td> 
  </tr> 
  <tr> 
   <td>RadioGroup</td> 
   <td style="width:224px;">单选框按钮组</td> 
   <td style="width:285px;">radiogroup_</td> 
   <td style="width:214px;">—</td> 
  </tr> 
  <tr> 
   <td>VSlider</td> 
   <td style="width:224px;">垂直滑动条</td> 
   <td style="width:285px;">vslider_</td> 
   <td style="width:214px;">—</td> 
  </tr> 
  <tr> 
   <td>HSlider</td> 
   <td style="width:224px;">水平滑动条</td> 
   <td style="width:285px;">hslider_</td> 
   <td style="width:214px;">—</td> 
  </tr> 
  <tr> 
   <td>Clip</td> 
   <td style="width:224px;">位图切片</td> 
   <td style="width:285px;">clip_</td> 
   <td style="width:214px;">—</td> 
  </tr> 
  <tr> 
   <td>ProgressBar</td> 
   <td style="width:224px;">进度条</td> 
   <td style="width:285px;">progressbar_</td> 
   <td style="width:214px;">progress_</td> 
  </tr> 
  <tr> 
   <td>ComboBox</td> 
   <td style="width:224px;">下拉框</td> 
   <td style="width:285px;">combobox_</td> 
   <td style="width:214px;">combo_</td> 
  </tr> 
  <tr> 
   <td>VScrollBar</td> 
   <td style="width:224px;">垂直滚动条</td> 
   <td style="width:285px;">vscrollbar_</td> 
   <td style="width:214px;">vscroll_</td> 
  </tr> 
  <tr> 
   <td>HScrollBar</td> 
   <td style="width:224px;">水平滚动条</td> 
   <td style="width:285px;">hscrollbar_</td> 
   <td style="width:214px;">hscroll_</td> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;">Image</span></td> 
   <td style="width:224px;"><span style="color:#f33b45;">位图</span></td> 
   <td style="width:285px;">image_</td> 
   <td style="width:214px;"><span style="color:#f33b45;">img_</span></td> 
  </tr> 
  <tr> 
   <td>Sprite</td> 
   <td style="width:224px;">所有组件的基类</td> 
   <td colspan="2" style="width:285px;"><span style="color:#f33b45;">不被识别为其它组件的资源都归为 Sprite 类型</span></td> 
  </tr> 
 </tbody> 
</table>

1、资源可以直接用前缀名的全写或缩写，而不加下划线，比如 textinput.png 和 input.png 会被识别为输入框组件，但是如果还跟随其它字符必须加下划线，如 inputAAA.png 不会被识别为输入框组件，input\_AAA.png 会识别为输入框（TextInput）组件。

2、基础组件都会显示在资源管理器列表中。

![20181225153458644.gif][]

## 特殊组件 ##

1、LayaAir IDE 自带的特殊组件一共有五个，分别是垂直滑动条组件：VSlider、水平滑动条组件：HSlider、进度条组件：ProgressBar、垂直滚动条组件：VScrollBar、水平滚动条组件：HScrollBar。

2、特殊组件并不是单张图片，而是由多张图片组成。主资源图片的命名规则遵守基础组件的命名规则，附加资源由两部分构成，这两部分用`$`符号相连，`$`之前是主资源的名称，`$`之后是关联状态的名称。

![图12][12]

3、bar 指的是滑动\\移动状态，比如 ProgressBa$bar.png，从命名上可以看出，它从属于 ProgressBar 组件，当产生进度条（bar）时使用 ProgressBa$bar.png 资源。

4、down 指的是向下状态，如果是横向滚动条，down 通常是向右的默认状态或点击时的状态。

5、up 指的是向上状态，如果是横向滚动条，up 通常是向左的默认状态或点击时的状态。

6、资源管理器中对于特殊组件的附加资源不会单独显示，列表中只会显示主资源组件。如果要对特殊组件资源进行操作，需要通过打开所在目录功能，在系统的文件目录中进行管理操作。

## 容器组件 ##

1、容器组件包括 Box、List、Tab、RadioGroup、ViewStack、Panel、HBox、VBox、Tree、Sprite。

2、除 Tab 外，容器组件通常不会在资源列表中出现，而是在场景编辑器中转换而来，当在场景编辑器内选中单个或多个组件时，通过快捷键 Ctrl + B 可以转换为容器。

![2018122515362942.gif][]

[IDEA_WebStorm]: https://blog.csdn.net/wangmx1993328/article/details/85244208
[20181225114308908.gif]: /images/20220402/38f400bec63f41f0b93fa7b3dda2c46c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70]: /images/20220402/3f309dc2b7b0424588448a85c63fb0f8.png
[20181225152212561.gif]: /images/20220402/05885f94d0284ba1a324e98869f1ed1f.png
[20181225153458644.gif]: /images/20220402/9466ba85523a47058bf15210d814fe5d.png
[12]: /images/20220402/3daa740132c64cd8b4ba453247a6deaf.png
[2018122515362942.gif]: /images/20220402/4f0cf6fcc0d74fcd89ef2d52c684a43c.png