Skip to content
目录

图层名称

现在表格结构已经规范,编译器也自动为单元格内容标识上了类型约束,接下来让我们把目光转到到设计稿的图层当中。

在设计稿开发过程中,我们通常会为每个图层单独命名,这样可以更好地理解设计稿结构,从而迅速的了解整体内容。

聪明的人是如此,笨笨的编译器亦是如此。

还记得唯一定位一个单元格所需要的条件吗?不记得的话,可以回顾一下上一节的内容

在插入数据之前,编译器必须知道操作图层的单元格位置,这个位置由四个参数来确定:表名、页名、行号、列号

表名在我们选中表格的时候已明确指定,剩余三个参数则是由每个图层的名称来告知编译器。

TIP

不必担心规则太多, 插件支持便捷的图层重命名操作,你只需要了解一下即可。

基本规则

其实非常简单, 基本三条规则如下

  • // 约定页名: 例如容器名 //常用 表示从名称为 常用 的页中获取单元格数据

  • # 约定列名: 例如容器名#姓名 表示从名称为 姓名 的列中获取单元格数据

  • * 限制子容器同一行内数据取值: 例如容器名#姓名 * 表示从名称为 姓名 的列中获取单元格数据,且其所有子容器都必须在此同一行单元格内取值

取值顺序

下面引入取值角标,代表不同的数据获取方式

  • .n 为默认值,不写也是可以的,表示每次后都是从当前行的下一行开始取值
  • .i 表示每次都是从当前行的下一行开始取值,且会忽略空值
  • .x 标识每次都是随机取值
  • .r 表示每次都是随机取值,且会忽略空值
  • .numeber 表示都是在第 number 行取值

简单组合

角标主要与 # 约定列名一起使用,例如

  • #姓名 表示从名称为 姓名 的列中获取单元格数据,且每次都是从当前行的下一行开始取值
  • #姓名.n (跟上面一样...) 表示从名称为 姓名 的列中获取单元格数据,且每次都是从当前行的下一行开始取值
  • #姓名.i 表示从名称为 姓名 的列中获取单元格数据,且每次都是从当前行的下一行开始取值,且会忽略空值
  • #姓名.x 表示从名称为 姓名 的列中获取单元格数据,且每次都是随机取值
  • #姓名.2 表示从名称为 姓名 的列中获取单元格数据,且都是在第 2 行取值
  • #姓名.r 表示从名称为 姓名 的列中获取单元格数据,且每次都是随机取值,且会忽略空值

角标.numeber也可以和 * 一起使用

假设设计稿内图层结构如下

md
- *.2 #背景图 
    - #邮件内容
    - #发件人
    - #收件人

其表示的意思是,#背景图 从第 2 行开始取值,且其所有子容器都必须在第二行单元格内取值

TIP

此处的 * 限制子容器同一行内数据取值,是为了保证设计稿内的内容单元的完整匹配性质, 例如 #发件人#收件人 必须在同一行单元格内取值, 这样就保证二者的内容是完整匹配的

原插件仅对instance容器实现此特性,这里通过引入 * ,实现了对所有容器的支持

复合特征

一个特征就对应一个(类型约束后的)单元格,一个图层又具备多种特征,例如:文本层具有文本内容,字体颜色,字体大小等等不同特征。

自然一个图层名中就允许包括对多个单元格的引用,例如:#字体 #字号 #颜色,这样就可以从三个不同的单元格中获取数据,然后组合成一个文本样式, 例如 宋体 常规体 20px #333333

这里的 #字体 #字号 #颜色 就是一个复合特征,其对应的单元格数据会被组合成一个文本样式,然后赋值给图层的文本样式属性

注意:复合特征只能组合不同类型的单元格,例如:#字体 #字号 #颜色 是合法的,但是 #字体 #字号 #其他字体 就是非法的,因为 #字体,#其他字体 都是在映射字体

如果真的遇到类型撞车,编译器会让后者会覆盖掉前者,上面例子最终的文本样式就是 #字号 #其他字体

取值继承

只有三条规则:

  • 父容器名称中的 //* 会自动继承给子容器
  • 子容器的 // 可以覆盖父容器的 //
  • 子容器的 * 无法覆盖父容器的 *

还是举栗子吧

markdown
- *.2 #背景图 //常用
    - #邮件内容
    - #发件人
    - #收件人

上述图层结构中,父容器的 *.2//常用 会自动继承给其子容器,所以 #邮件内容#发件人#收件人 都会在常用页面下第二行取值

markdown
- *.2 #背景图 //常用
    - #邮件内容
    - #发件人 
    - #收件人
    - #其他 //特殊 
        - #其他1
        - #其他2

上述图层结构中,子容器的 //特殊 会覆盖父容器的 //常用,所以 其他#其他1#其他2 都会在特殊页面下取值

markdown
- *.2 #背景图 //常用
    - #邮件内容 *.3 
      - #开头
      - #结尾
    - #发件人 
    - #收件人
    

上述图层结构中,子容器的 *.3 无法覆盖父容器的 *.2,所以 #邮件内容#开头#结尾依旧会在常用页面下第二行取值

Released under the GPL License.